Listas en HTML
Listas
HTML tiene tres tipos de lista: desordenada (ul/li), ordenada (ol/li) y de definición (dl/dt/dd). La elección entre ellas depende de si el orden importa y de si el contenido son términos con definición.
Una lista en HTML no es solo una colección de ítems visualmente sangrados — es una declaración semántica de que esos ítems forman un conjunto relacionado. El navegador, los lectores de pantalla y los motores de búsqueda tratan a una lista como una unidad: los lectores de pantalla anuncian cuántos ítems tiene antes de empezar a leerla, y los motores de búsqueda la reconocen como un bloque de información estructurada.
HTML ofrece tres constructos de lista, cada uno con un modelo semántico diferente: las listas desordenadas (<ul>) para conjuntos donde el orden no importa, las listas ordenadas (<ol>) para secuencias donde la posición es parte del significado, y las listas de definición (<dl>) para pares término-descripción. Elegir el tipo correcto no es un detalle menor: un procedimiento paso a paso en una <ul> pierde la información de que los pasos tienen un orden obligatorio.
Los ítems de lista son elementos de bloque que el navegador gestiona como grupo. Por defecto, la mayoría de los navegadores añaden sangría y un marcador visual (viñeta para <ul>, número para <ol>), pero esos estilos son completamente controlables con CSS — y en muchos componentes UI reales se reemplazan por completo.
Cómo funciona
ul, ol y li
Tanto <ul> como <ol> son contenedores que solo aceptan <li> (list item) como hijos directos válidos. El contenido real vive dentro de <li>, y puede ser cualquier contenido de bloque o inline — texto, párrafos, imágenes, incluso otras listas anidadas.
<ol> acepta los atributos start (número inicial) y reversed (cuenta regresiva). El atributo type cambia el estilo del marcador (letras, números romanos), aunque la práctica moderna es controlarlo con la propiedad CSS list-style-type.
dl, dt y dd
La lista de definición es el tipo más especializado y el menos utilizado por defecto, aunque tiene casos de uso claros: glosarios, metadatos de un artículo (autor, fecha, categoría), tablas de especificaciones, preguntas frecuentes. <dt> es el término, <dd> es la descripción. Un <dt> puede tener múltiples <dd>, y un <dl> puede tener múltiples <dt> consecutivos para un mismo conjunto de descripciones.
Cuándo usar qué
| Caso | Lista correcta | Razonamiento |
|---|---|---|
| Ingredientes de una receta | <ul> | El orden de los ingredientes no importa |
| Pasos de un procedimiento | <ol> | El orden es parte del significado |
| Glosario de términos | <dl> | Son pares término-descripción |
| Ítems de navegación | <ul> | Los links de un menú son un conjunto sin orden obligatorio |
| Ranking o top 10 | <ol> | La posición tiene significado |
| Metadatos (autor, fecha) | <dl> | Pares clave-valor |
El error más común es usar <ul> simplemente para crear sangría visual — el propósito de sangrar sin semántica de lista corresponde a CSS (padding-left), no a una lista HTML.
Notas sobre estilos
Los estilos por defecto del navegador (sangría, viñetas) se pueden resetear con CSS:
ul, ol {
list-style: none;
margin: 0;
padding: 0;
}Esto es muy común en componentes de navegación y menús donde el diseño no se parece a una lista tradicional, pero el HTML semántico sigue siendo <ul>/<li>.
<!-- Lista desordenada: el orden no importa -->
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<!-- Lista ordenada: el orden importa -->
<ol>
<li>Activar display: flex en el contenedor</li>
<li>Definir flex-direction</li>
<li>Ajustar justify-content y align-items</li>
</ol>
<!-- Lista de definición: pares término-descripción -->
<dl>
<dt>Cascada</dt>
<dd>Algoritmo que determina qué regla CSS se aplica cuando hay conflicto.</dd>
<dt>Especificidad</dt>
<dd>Peso de un selector que determina su prioridad en la cascada.</dd>
</dl>