Listas en HTML

Las listas agrupan elementos relacionados. Están por todas partes, aunque no siempre lo parezca: una receta, los productos de un carrito, el menú de navegación, las migas de pan de una tienda o la ficha técnica de un móvil son listas. HTML tiene tres tipos, y elegir bien cuál usar hace tu página más clara para las personas, para los lectores de pantalla y para Google.

Por qué usar listas

Podrías escribir los elementos con saltos de línea y guiones, pero perderías mucho:

• Accesibilidad. Un lector de pantalla anuncia “lista, 5 elementos” y permite saltar de un elemento a otro o saltarse la lista entera. Con guiones escritos a mano, solo lee texto.
• Estilo. Con CSS puedes cambiar las viñetas, poner los elementos en fila o convertirlos en tarjetas sin tocar el HTML.
• Significado. Queda claro qué cosas forman un grupo.

Lista sin orden: <ul>

Para elementos en los que el orden no importa. Se muestra con viñetas:

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

• <ul> (unordered list) envuelve toda la lista.
• Cada elemento va en un <li> (list item).

Pregúntate: si cambio el orden de los elementos, ¿cambia el significado? Si la respuesta es no (los ingredientes de una receta, las ventajas de un producto, los servicios de un gimnasio), es un <ul>.

Dentro de un <li> puedes poner casi cualquier cosa: texto, enlaces, imágenes, párrafos o incluso otra lista. Lo que no puedes es poner nada que no sea un <li> directamente dentro del <ul>:

<!-- Mal: un <p> suelto dentro de la lista -->
<ul>
  <p>Servicios:</p>
  <li>Sala de musculación</li>
</ul>

<!-- Bien: el título va fuera -->
<p>Servicios:</p>
<ul>
  <li>Sala de musculación</li>
  <li>Piscina climatizada</li>
</ul>

Lista ordenada: <ol>

Para pasos o rankings, donde el orden sí importa. Se numera sola:

<ol>
  <li>Instala Node.js</li>
  <li>Crea el proyecto</li>
  <li>Ejecuta npm run dev</li>
</ol>

La gran ventaja de que se numere sola: si añades un paso en medio, no tienes que renumerar nada a mano.

Atributos de <ol>

Tiene algunos atributos útiles:

• start="5" empieza a contar en 5.
• reversed cuenta hacia atrás.
• type="a" usa letras (a, b, c) y type="I" números romanos.

Por ejemplo, un top 3 de libros más prestados de la biblioteca, contado de abajo arriba:

<ol reversed>
  <li>El infinito en un junco</li>
  <li>Patria</li>
  <li>La sombra del viento</li>
</ol>

3. El infinito en un junco
2. Patria
1. La sombra del viento

Y si una lista de pasos se interrumpe con una explicación y luego sigue, usa start para continuar la numeración:

<ol>
  <li>Descarga el instalador.</li>
  <li>Ejecútalo.</li>
</ol>
<p>Si Windows muestra un aviso, pulsa "Más información" y "Ejecutar de todas formas".</p>
<ol start="3">
  <li>Acepta la licencia.</li>
  <li>Pulsa Instalar.</li>
</ol>

Estos son todos los valores de type:

Valor	Numeración
1 (por defecto)	1, 2, 3, 4
a	a, b, c, d
A	A, B, C, D
i	i, ii, iii, iv
I	I, II, III, IV

Consejo: usa type solo cuando el tipo de numeración forme parte del contenido (por ejemplo, un reglamento que cita “el apartado b”). Si solo es una cuestión de estética, cámbialo con la propiedad CSS list-style-type.

El atributo value de <li>

Dentro de un <ol>, un <li> puede fijar su propio número con value. Los siguientes continúan a partir de él:

<ol>
  <li>Primero</li>
  <li value="10">Décimo</li>
  <li>Undécimo</li>
</ol>

1. Primero
10. Décimo
11. Undécimo

Listas anidadas

Una lista puede ir dentro de un <li> de otra lista:

<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </li>
  <li>Backend</li>
</ul>

Fíjate en que la lista de dentro va antes del </li> de “Frontend”. Un error típico es cerrar el <li> antes de abrir la sublista.

Puedes mezclar tipos. Por ejemplo, un temario con temas numerados y apartados sin orden:

<ol>
  <li>Introducción a la web
    <ul>
      <li>Cómo funciona Internet</li>
      <li>Navegadores y servidores</li>
    </ul>
  </li>
  <li>HTML
    <ol type="a">
      <li>Estructura</li>
      <li>Textos</li>
      <li>Enlaces</li>
    </ol>
  </li>
</ol>

El navegador cambia la viñeta en cada nivel de las listas sin orden (círculo relleno, círculo vacío, cuadrado) para que se distingan.

Cuidado: no anides más de dos o tres niveles. Una lista con cinco niveles es difícil de leer y aún más de escuchar con un lector de pantalla. Si la necesitas, probablemente el contenido merezca encabezados.

Lista de definiciones: <dl>

Para parejas de término y descripción, como un glosario:

<dl>
  <dt>HTML</dt>
  <dd>Lenguaje para el contenido de una web.</dd>
  <dt>CSS</dt>
  <dd>Lenguaje para el aspecto de una web.</dd>
</dl>

• <dt> es el término.
• <dd> es su descripción.

Aunque se llame “lista de definiciones”, sirve para cualquier grupo de nombre y valor. Una ficha de producto, por ejemplo:

<dl>
  <dt>Pantalla</dt>
  <dd>6,1 pulgadas</dd>
  <dt>Batería</dt>
  <dd>4000 mAh</dd>
  <dt>Colores</dt>
  <dd>Negro</dd>
  <dd>Azul</dd>
  <dd>Verde</dd>
</dl>

Un término puede tener varias descripciones (los colores) y varios términos pueden compartir una descripción (sinónimos). Para dar estilo a cada pareja, puedes envolverla en un <div>, que es lo único además de <dt> y <dd> que admite un <dl>:

<dl>
  <div>
    <dt>Horario</dt>
    <dd>De 7:00 a 23:00</dd>
  </div>
  <div>
    <dt>Cuota mensual</dt>
    <dd>35 €</dd>
  </div>
</dl>

Los menús también son listas

Un menú de navegación es, en el fondo, una lista de enlaces. Por eso se suele escribir así:

<nav>
  <ul>
    <li><a href="/">Inicio</a></li>
    <li><a href="/cursos">Cursos</a></li>
    <li><a href="/contacto">Contacto</a></li>
  </ul>
</nav>

Luego, con CSS, se quitan las viñetas y se colocan los enlaces en fila.

Así, un lector de pantalla anuncia “navegación, lista, 3 elementos”: la persona sabe desde el principio cuántas opciones hay. Marca la página actual con aria-current="page" en su enlace.

Submenús

Un submenú es una lista anidada dentro del elemento del menú principal:

<nav aria-label="Principal">
  <ul>
    <li><a href="/">Inicio</a></li>
    <li><a href="/cursos/">Cursos</a>
      <ul>
        <li><a href="/cursos/html/">HTML</a></li>
        <li><a href="/cursos/css/">CSS</a></li>
      </ul>
    </li>
    <li><a href="/contacto/">Contacto</a></li>
  </ul>
</nav>

Migas de pan

Las migas de pan (breadcrumbs) muestran dónde estás dentro de la web. Aquí el orden sí importa, así que son un <ol>:

<nav aria-label="Migas de pan">
  <ol>
    <li><a href="/">Inicio</a></li>
    <li><a href="/deportes/">Deportes</a></li>
    <li><a href="/deportes/escalada/" aria-current="page">Escalada</a></li>
  </ol>
</nav>

Quitar las viñetas con CSS

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 16px;
}

list-style: none quita las viñetas, y padding: 0 elimina la sangría que el navegador añade por defecto. Lo verás a fondo en listas y tablas con CSS.

Cuidado: Safari con VoiceOver deja de anunciar como lista un <ul> al que quitas las viñetas con list-style: none. Si en ese contexto es importante que se anuncie, añade role="list" al <ul>.

Errores frecuentes

• Elementos que no son <li> directamente dentro de <ul> u <ol>. Mételos dentro de un <li> o sácalos de la lista.
• Cerrar el <li> antes de la sublista. La lista anidada debe ir dentro del <li>.
• Numerar a mano (“1. Pela las patatas”) dentro de un <ol>: salen dos números.
• Usar <ul> para pasos en los que el orden importa, o <ol> para cosas sin orden.
• Hacer sangrías con listas vacías o con <blockquote>. La sangría se hace con CSS.
• Usar <dl> solo para conseguir sangría. Úsalo cuando haya parejas de nombre y valor.

Resumen

Lista	Cuándo	Elementos
<ul>	El orden no importa	<li>
<ol>	El orden importa (pasos, rankings, migas de pan)	<li>
<dl>	Parejas término-descripción o nombre-valor	<dt>, <dd> (y <div>)

• <ol> admite start, reversed y type; <li> admite value.
• Las listas se anidan dentro de un <li>.
• Los menús son listas de enlaces dentro de un <nav>.
• Las viñetas y la sangría se cambian con CSS, no con HTML.

<ol start="4" reversed>
  <li>Bronce</li>
  <li>Plata</li>
  <li>Oro</li>
</ol>