Curso de HTML / Listas en HTML: ol, ul, dl y listas anidadas

Utiliza ol si el orden de los elementos cambia su significado, ul si el orden no es esencial y dl para asociar nombres con descripciones o valores. Los elementos de ol y ul se escriben con li; en dl se utilizan dt y dd. La elección describe relaciones, no solamente el tipo de viñeta.

Elegir el tipo de lista

Una lista de materiales no necesita ser ordenada solo porque quieras ver números. Tampoco conviertas una secuencia de pasos en una lista sin orden únicamente por preferir viñetas. Los marcadores, la sangría y los colores se ajustan con CSS sin cambiar la relación que expresa el HTML.

Comparar las tres listas en un archivo

Guarda el siguiente documento completo como lists.html y ábrelo en un navegador. Compara la lista de materiales, los pasos y los términos del viaje. El ejemplo incluye una regla de fuente; si esa fuente no está instalada, el navegador utiliza una alternativa sans serif.

<!doctype html>

<html lang="en">

  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>HTML lists</title>

    <style>

      body { font-family: "Noto Sans KR", sans-serif; }

    </style>

  </head>

  <body>

    <h1>Planning a trip</h1>

    <h2>Supplies</h2>

    <ul>

      <li>Water</li>

      <li>Map</li>

    </ul>

    <h2>Steps</h2>

    <ol>

      <li>Choose dates</li>

      <li>Pack a bag</li>

    </ol>

    <h2>Terms</h2>

    <dl>

      <dt>Departure</dt>

      <dd>The day the trip begins</dd>

      <dt>Arrival</dt>

      <dd>The day you reach the destination</dd>

    </dl>

  </body>

</html>

Los elementos de las listas ordenada y no ordenada aparecen como li. En la descriptiva, cada dt introduce un nombre y el dd asociado aporta una explicación. Que la presentación inicial sea diferente ayuda a observarlas, pero no es lo que define su utilidad.

Cambiar la numeración sin cambiar el significado

Por defecto, una lista ol empieza por 1. start cambia el primer número y value, escrito en un li, establece el número de ese elemento.

<ol start="5">

  <li>Fifth step</li>

  <li value="9">Ninth step</li>

  <li>Tenth step</li>

</ol>

Este caso muestra 5, 9 y 10: después de asignar 9 al segundo elemento, el siguiente continúa con 10. Para contar hacia atrás existe el atributo booleano reversed.

<ol reversed>

  <li>Third item</li>

  <li>Second item</li>

  <li>First item</li>

</ol>

Esta lista independiente contiene tres elementos y, sin un inicio explícito, presenta 3, 2 y 1. Modifica solo start o value cada vez, observa la secuencia y restaura el ejemplo antes de probar otra opción. La numeración debe corresponder al contenido que realmente estás ordenando.

Relacionar nombres y descripciones

Una lista dl no se limita a definiciones de diccionario. Puede expresar horarios, propiedades o pares de metadatos. Conserva una asociación clara entre cada nombre y su descripción:

<dl>

  <dt>Opening hours</dt>

  <dd>Weekdays, 9 a.m. to 6 p.m.</dd>

  <dt>Closed</dt>

  <dd>Saturday and Sunday</dd>

</dl>

Los horarios de este bloque son ficticios y solo ilustran la estructura. Si describes un horario real, comprueba su vigencia en la fuente correspondiente. No escribas una colección de términos sin sus relaciones únicamente para obtener la sangría que produce el navegador.

Anidar dentro del elemento que se amplía

Una sublista pertenece al li cuyo contenido desarrolla. Aquí las prendas forman parte de un elemento de los materiales:

<ul>

  <li>Water</li>

  <li>Clothing

    <ul>

      <li>Jacket</li>

      <li>Socks</li>

    </ul>

  </li>

</ul>

La sublista se cierra antes de cerrar el li exterior. También puedes combinar tipos: el orden de los pasos de preparación importa, mientras que el orden de dos objetos que debes guardar en la maleta puede ser indiferente.

<ol>

  <li>Choose travel dates</li>

  <li>Pack a bag

    <ul>

      <li>Clothing</li>

      <li>Toiletries</li>

    </ul>

  </li>

  <li>Leave for the trip</li>

</ol>

No coloques la sublista directamente como hija de la lista exterior fuera de un li. Tampoco metas una lista completa dentro de un párrafo p. Repasa el cierre de elementos anidados si no resulta clara la relación entre las aperturas y los cierres.

La referencia de agrupación de contenido de WHATWG define estos elementos. Puedes aplicar una lista útil a la página de presentación de un pequeño sitio con varios documentos, manteniendo la estructura de archivos y los enlaces de ese proyecto.