Listas en HTML

En HTML, los elementos "ul", "ol", "li", "dl", "dt" y "dd", permiten representar listas ordenadas (ordered lists), listas desordenadas (unordered lists) y listas de descripción de términos (description lists).

Lista desordenada - Elementos "ul" y "li"

EJEMPLO Para que en un navegador se muestre la siguiente lista desordenada de colores:

Visualización del archivo lista-desordenada.html en Google Chrome, donde se ve una lista desordenada de colores.

Se puede hacer uso de los elementos "ul" y "li" del siguiente modo ("lista-desordenada.html"):

<!DOCTYPE html>
<html lang="es-ES">
  <head>
    <meta charset="utf-8">
    <title>Ejemplo de lista desordenada</title>
  </head>
  <body>
    <p>Lista desordenada de colores:</p>
    <ul>
      <li>Rojo</li>
      <li>Amarillo</li>
      <li>Verde</li>
      <li>Blanco</li>
      <li>Naranja</li>
    </ul>
  </body>
</html>

Obsérvese que, cada color está contenido en un elemento "li", y todos ellos se escriben dentro del elemento "ul".

Lista ordenada - Elementos "ol" y "li"

EJEMPLO Si se quiere visualizar una lista ordenada como la siguiente:

Visualización del archivo lista-ordenada.html en Google Chrome, donde se ve una lista de animales ordenados por su tamaño, de mayor a menor.

Para ello, se pueden utilizar los elementos "ol" y "li" ("lista-ordenada.html"):

<!DOCTYPE html>
<html lang="es-ES">
  <head>
    <meta charset="utf-8">
    <title>Ejemplo de lista ordenada</title>
  </head>
  <body>
    <p>Lista de 5 animales ordenados de mayor a menor tamaño:</p>
    <ol>
      <li>Elefante</li>
      <li>Cebra</li>
      <li>Oveja</li>
      <li>Gato</li>
      <li>Ratón</li>
    </ol>
  </body>
</html>

En una lista ordenada, los elementos están ubicados de forma que, si se cambiasen de lugar, cambiaría también el significado de la lista.

Lista de descripción de términos - Elementos "dl", "dt" y "dd"

EJEMPLO Para mostrar un glosario de siglas:

Visualización del archivo lista-de-descripcion-de-terminos.html en Google Chrome, donde se ve un glosario de siglas.

Se puede escribir el siguiente código ("lista-de-descripcion-de-terminos.html"):

<!DOCTYPE html>
<html lang="es-ES">
  <head>
    <meta charset="utf-8">
    <title>Ejemplo de lista de descripción de términos</title>
  </head>
  <body>
    <p>Glosario de siglas:</p>
    <hr>
    <dl>
      <dt>CSS</dt>
      <dd>Cascading Style Sheets</dd>
      <dt>HTML</dt>
      <dd>HyperText Markup Language</dd>
      <dt>W3C</dt>
      <dd>World Wide Web Consortium</dd>
    </dl>
  </body>
</html>

Fíjese que, el elemento "dl" alberga a los grupos "término-descripción" (elemento "dt" - elemento "dd").

Ejercicio resuelto
Listas de enlaces