Listas

Una lista de compras y una receta son listas, pero solo una de ellas se arruina si cambias el orden. HTML tiene un elemento distinto para cada una.

Listas sin orden y ordenadas

Si el orden de los elementos no importa, usa una lista sin orden, <ul>. Los navegadores marcan cada elemento con una viñeta. Si el orden sí importa, como en los pasos de una receta o en una clasificación, usa una lista ordenada, <ol>, y el navegador numera los elementos por ti. En los dos casos, cada elemento es un <li>, un elemento de lista, y los únicos elementos permitidos directamente dentro de <ul> o <ol> son elementos <li>. El texto y los demás elementos van dentro de los elementos de lista.

<h2>You will need</h2>
<ul>
  <li>500 g flour</li>
  <li>10 g salt</li>
  <li>350 ml warm water</li>
</ul>

<h2>Method</h2>
<ol>
  <li>Mix everything in a bowl.</li>
  <li>Leave it covered for 12 hours.</li>
  <li>Shape and bake at 230 degrees for 40 minutes.</li>
</ol>

¿Por qué no escribir tú mismo los números o los guiones? Porque entonces el navegador no sabe que hay una lista. Un lector de pantalla anuncia una lista real con su longitud, por ejemplo lista, 3 elementos, así quien escucha sabe cuánto viene y puede saltarla. Cuando insertas un paso en un <ol>, todos los números que siguen se actualizan solos; con números escritos a mano tendrías que volver a numerar tú.

Opciones de las listas ordenadas

<ol> tiene algunos atributos. start="4" empieza a contar en 4, útil cuando una lista continúa después de un párrafo. reversed cuenta hacia atrás, para un top diez. type cambia el marcador a letras o a números romanos: type="a", type="A", type="i" o type="I". Un solo elemento también puede saltar a un número con value, como en <li value="10">. Cómo se ven las viñetas y los números (su forma, su color o si se muestran) lo controla CSS.

Listas dentro de listas

Un elemento de lista puede contener una lista entera. Pon el <ul> o el <ol> interior dentro del <li> al que pertenece, después del texto de ese elemento y antes de su etiqueta de cierre. Un error común es poner la lista interior entre dos elementos <li>, directamente dentro de la lista exterior, y eso no está permitido. Con listas anidadas los sitios arman menús con submenús y los esquemas muestran subpuntos.

<ul>
  <li>Bread
    <ul>
      <li>Sourdough</li>
      <li>Rye</li>
    </ul>
  </li>
  <li>Cakes</li>
</ul>

Listas de descripción

El tercer tipo de lista empareja términos con descripciones, como un glosario o un conjunto de preguntas y respuestas. <dl> es la lista de descripción, <dt> contiene un término y <dd> contiene su descripción. Un término puede tener varias descripciones, y varios términos pueden compartir una. Los navegadores ponen sangría a las descripciones por defecto.

Las listas aparecen en lugares que quizá no esperas. El menú de arriba de la mayoría de los sitios es un <ul> de enlaces dentro de un <nav>; CSS acomoda los elementos en fila y oculta las viñetas. Una fila de tarjetas de productos o un conjunto de resultados de búsqueda también suelen ser una lista. Cuando veas un grupo de cosas parecidas, pregúntate si es una lista; casi siempre la respuesta es sí.

Una forma rápida de elegir entre las dos: imagina que mezclas los elementos. Si mezclarlos cambia el significado, como pasaría con los pasos de una receta o con un top diez, la lista es ordenada y necesita <ol>. Si no cambia nada, como en una lista de equipaje, usa <ul>. Mantén cada elemento breve y empieza todos los elementos de la misma forma gramatical, para que la lista se pueda recorrer con la vista fácilmente.