Cómo hacer una pagina web (7) - Listas no ordenadas

En HTML hay tres tipos de listas: no ordenadas, ordenadas y de definición. En este tutorial voy a explicar qué son las listas no ordenadas, pero antes es importante que sepas que un ítem de lista es cada uno de los "puntos" o partes que componen una lista, sea del tipo que sea.

¿Qué es una lista no ordenada o de viñetas?

• Es aquella en la que si se cambiara el orden de los ítems la información seguiría teniendo sentido.
• Se crea con el elemento UL (de Unordered List) y uno o más elementos LI (de List Item).
• Con cada elemento LI se crea un ítem de lista.
• Los navegadores visuales muestran cada ítem de lista en una línea diferente y con una viñeta precediendo al texto. Las viñetas pueden ser de tipo disc (círculo), circle (circunferencia) y square (cuadrado).

Abre en tu editor de texto la página HTML con recetas que estábamos haciendo. Borra los párrafos que hay después del H3 "Ingredientes" de Sushi (es decir, los dos <p> Lorem ipsum... </p>), y escribe esto en su lugar:

<ul>
  <li>Arroz japonés</li>
  <li>Vinagre de arroz</li>
  <li>x gramos de atún</li>
  <li>x gramos de salmón</li>
  <li>6 langostinos</li>
  <li>Wasabi</li>
  <li>Gari</li>
  <li>Salsa de soja</li>
</ul>

Una lista no ordenada es ideal para listar ingredientes, ya que el orden de los ingredientes realmente no importa. Como ves, hemos creado nuestra lista no ordenada con las etiquetas de apertura y cierre <ul> y </ul> y varios items de lista entre ellas, cada uno de ellos formado por las etiquetas <li> </li> y un texto entre ambas.

Visualiza el resultado. Yo estoy usando los navegadores Flock, Firefox 3.0.8, Safari 4 Beta, IE 8 y Opera 9.64 y en todos ellos las viñetas de los ítems de lista son del tipo disc, aunque puede que haya alguno en el que no sea así.

Convendría que empezaras a usar varios navegadores para que vieras las diferencias entre ellos, como por ejemplo la diferencia en el tamaño de las viñetas. Según vayamos avanzando verás que de dolores de cabeza pueden llegar a dar las discrepancias entre navegadores, sobre todo las de Internet Explorer.

Listas anidadas

Una lista anidada (nested list) es una lista dentro de una lista. Para anidar una lista lo único que hay que hacer es crearla justo antes de la etiqueta de cierre </li> del ítem de lista donde queramos anidarla.

Por ejemplo, imaginemos que queremos que haya varios tipos de langostinos en nuestra receta; una manera fácil de reflejar esto es crear una nueva lista con los tipos de langostinos que queremos y anidarla dentro del ítem "langostinos".

<ul>
  <li>Arroz japonés</li>
  <li>Vinagre de arroz</li>
  <li>x gramos de atún</li>
  <li>x gramos de salmón</li>
  <li>6 langostinos
    <ul>
      <li>3 blancos</li>
      <li>3 tigres</li>
    </ul>
  </li>
  <li>Wasabi</li>
  <li>Gari</li>
  <li>Salsa de soja</li>
</ul>

Visualiza el resultado. Como ves, para remarcar que una lista es anidada y facilitar la lectura y comprensión de los usuarios, los principales navegadores muestran las listas anidadas indentadas y generalmente con un tipo de viñeta diferente al de la lista de la que dependen. Todos los navegadores que estoy usando emplean en la lista anidada viñetas de tipo circle, salvo Opera que mantiene las viñetas de tipo disc. Si anidárais una lista dentro de esta lista ya anidada, los principales navegadores mostrarían viñetas de tipo square, salvo Opera que mantendría las de tipo disc.

Por supuesto, podrías anidar una lista dentro de una lista dentro de una lista dentro de... pero lo aconsejable, como siempre, es mantener las cosas sencillas siempre que se pueda y facilitar la lectura y comprensión al usuario. Si te hace falta anidar muchas veces es mi opinión que el contenido no está lo suficientamente trabajado para internet.

Cómo cambiar una lista

Como con la mayoría de los elementos HTML, se puede "jugar" con las listas y cambiar su aspecto usando hojas de estilo. Con las hojas de estilo puede conseguirse que en vez de viñetas cada ítem de lista tenga una pequeña imagen, que los ítems no estén en diferentes líneas sino en la misma, que la distancia entre ítems sea mayor o menor, que los ítems anidados tengan un color de texto diferente... y muchísmas cosas más.

En un próximo post os explicaré cómo ver lo "invisible" y así empezar a comprender cómo funcionan las hojas de estilo. Aunque todavía nos queda un tiempo antes de meternos de lleno con ellas, y entonces entenderás por qué he seguido este orden. 8)