Listas HTML
En HTML existen tres tipos principales de listas: no ordenadas, ordenadas y de descripción. Cada una se define con etiquetas distintas
En HTML existen tres tipos de listas: no ordenadas, ordenadas y de descripción. Cada una se define con etiquetas diferentes. Veamos cada una de ellas.
Listas No Ordenadas en HTML
Las listas no ordenadas se utilizan para agrupar elementos que no tienen un orden numérico. Si se cambia el orden de los elementos, el significado no varía. Para crear una lista no ordenada se usa la etiqueta <ul>. Esta etiqueta va en pares; el contenido se escribe entre las etiquetas de apertura <ul> y cierre </ul>.
Cada elemento de una lista no ordenada se declara dentro de la etiqueta <li>.
Ejemplo de la etiqueta HTML <ul> para crear una lista no ordenada:
Un ejemplo de lista no ordenada|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>An unordered list:</h1>
<ul>
<li>This is a list item</li>
<li>This is another list item</li>
<li>This is one more list item</li>
</ul>
</body>
</html>Los elementos de las listas no ordenadas están marcados con viñetas (pequeños círculos negros) de forma predeterminada. El atributo antiguo type (type="circle", type="square") permitía cambiar el estilo de la viñeta, pero está obsoleto en HTML5. En su lugar, usa la propiedad CSS list-style-type, que es la forma moderna y compatible de controlar los marcadores tanto en listas no ordenadas como ordenadas. El mapa de migración completo de los valores antiguos de type a CSS se encuentra en la sección de listas ordenadas más abajo.
Ejemplo de la etiqueta HTML <ul> para crear una lista no ordenada donde los elementos están marcados con viñetas:
Ejemplo del atributo type para listas HTML
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<ul type="circle">
<li>List item </li>
<li>List item</li>
<li>List item</li>
</ul>
<ul type="square">
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</body>
</html>Resultado
También puedes usar la propiedad CSS list-style-type o list-style-image para especificar el tipo de marcador del elemento de lista.
Ejemplo de la etiqueta HTML <ul> usada con la propiedad CSS list-style-type para crear una lista no ordenada:
Ejemplo de la propiedad list-style-type
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Examples of unordered lists:</h2>
<ul style="list-style-type: square;">
<li>Cold Drinks</li>
<li>Hot Drinks</li>
<li>Ice-Creams</li>
</ul>
<ul style="list-style-type: disc;">
<li>Coca-Cola</li>
<li>Fanta</li>
<li>Ice Tea</li>
</ul>
<ul style="list-style-type: circle;">
<li>Coca-Cola</li>
<li>Fanta</li>
<li>Ice Tea</li>
</ul>
</body>
</html>Listas Ordenadas en HTML
La lista ordenada en HTML se usa para enumerar elementos marcados con números. Comienza con la etiqueta <ol>. Esta etiqueta va en pares; el contenido se escribe entre las etiquetas de apertura <ol> y cierre </ol>.
Cada elemento de la lista ordenada comienza con la etiqueta de apertura <li> y termina con la etiqueta de cierre </li>.
Ejemplo de la etiqueta HTML <ol> para crear una lista ordenada:
Ejemplo de una lista ordenada en HTML|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>An ordered list:</h1>
<ol>
<li>This is List item number 1</li>
<li>This is List item number 2</li>
<li>This is List item number 3</li>
</ol>
</body>
</html>Los elementos de una lista ordenada están marcados con números de forma predeterminada. Para numerarlos con letras o números romanos, la forma antigua era añadir type="a" o type="I" a la etiqueta <ol>. Ese atributo type sigue funcionando en los navegadores, pero está obsoleto en HTML5, por lo que en código nuevo se prefiere la propiedad CSS list-style-type.
Migración del atributo type obsoleto a CSS
Cada valor antiguo de type se corresponde directamente con un valor de CSS list-style-type:
| Atributo obsoleto | CSS equivalente | Ejemplo de salida |
|---|---|---|
type="1" | list-style-type: decimal; | 1, 2, 3 |
type="A" | list-style-type: upper-alpha; | A, B, C |
type="a" | list-style-type: lower-alpha; | a, b, c |
type="I" | list-style-type: upper-roman; | I, II, III |
type="i" | list-style-type: lower-roman; | i, ii, iii |
El primer ejemplo a continuación usa el atributo obsoleto type para que puedas ver todos los estilos de marcador de un vistazo; en código de producción, usa el valor equivalente de list-style-type de la tabla.
Ejemplo de la etiqueta HTML <ol> para crear una lista ordenada con letras y números romanos:
Ejemplo de diferentes marcadores para elementos de lista
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h3>A numbered list:</h3>
<ol>
<li>Peach</li>
<li>Apricot</li>
<li>Banana</li>
<li>Strawberry</li>
</ol>
<h3>An alphabetized list:</h3>
<ol type="A">
<li>Peach</li>
<li>Apricot</li>
<li>Banana</li>
<li>Strawberry</li>
</ol>
<h3>An alphabetized list (lowercase letters):</h3>
<ol type="a">
<li>Peach</li>
<li>Apricot</li>
<li>Banana</li>
<li>Strawberry</li>
</ol>
<h3>A numbered list (Roman numerals):</h3>
<ol type="I">
<li>Peach</li>
<li>Apricot</li>
<li>Banana</li>
<li>Strawberry</li>
</ol>
<h3>A numbered list (lowercase Roman numerals):</h3>
<ol type="i">
<li>Peach</li>
<li>Apricot</li>
<li>Banana</li>
<li>Strawberry</li>
</ol>
</body>
</html>Listas de Descripción en HTML
Las listas de descripción en HTML se usan para emparejar términos con sus descripciones, de forma similar a un diccionario o glosario.
Para crear una lista de descripción se usa la etiqueta <dl>. Esta etiqueta va en pares.
Dentro de <dl>, se usan las etiquetas <dt> para un término/nombre en la lista de descripción, y <dd> para la descripción de dicho término/nombre.
Ejemplo de la etiqueta HTML <dl> para crear una lista de descripción:
Ejemplo de una lista de descripción|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Description Lists:</h1>
<dl>
<dt>Tea</dt>
<dd>hot drink</dd>
<dt>Juice</dt>
<dd>cold drink</dd>
</dl>
</body>
</html>Resultado
Cuándo usar <dl> en lugar de una <ul> de pares
Usa una lista de descripción cuando tus datos sean genuinamente un conjunto de pares nombre/valor (término/definición): entradas de glosario, metadatos de clave-valor (autor, fecha de publicación, categoría), pares de preguntas y respuestas en una FAQ, o diálogos. El elemento <dl> hace explícita esa relación en el marcado, algo que las tecnologías de asistencia pueden transmitir.
Si tus elementos son simplemente una secuencia plana sin estructura de pares, un simple <ul> es la elección correcta. No simules el emparejamiento clave/valor alternando elementos <li> dentro de un <ul>, ya que eso elimina la asociación semántica entre el término y su descripción.
Un único <dt> puede ir seguido de varios elementos <dd> (un término, varias descripciones), y varios elementos <dt> pueden compartir un único <dd> (varios términos con la misma definición). Ambas formas son válidas:
<dl>
<dt>Coffee</dt>
<dt>Espresso</dt>
<dd>A hot caffeinated drink.</dd>
<dt>Water</dt>
<dd>A drink with no calories.</dd>
<dd>Also used for cooking and cleaning.</dd>
</dl>Uso incorrecto habitual: el <dl> se usó alguna vez de forma indebida únicamente por su sangría predeterminada. Nunca lo uses solo por el aspecto visual — usa margin/padding de CSS para eso. Utiliza <dl> únicamente cuando el contenido sea realmente datos de término/descripción. Consulta las páginas dedicadas a <dl>, <dt> y <dd> para más detalles.
Listas Anidadas en HTML
Una lista anidada contiene una lista dentro de otra lista.
Ejemplo de una lista anidada en HTML:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>A nested HTML list</h2>
<p>A nested list contains a list inside a list.</p>
<ul>
<li>Copybooks</li>
<li>
Books
<ul>
<li>Detective books</li>
<li>Roman books</li>
<li>Fairy tale books</li>
</ul>
</li>
</ul>
</body>
</html>La lista anidada debe colocarse dentro de un elemento <li>, no directamente entre los elementos <li> del padre — un <ul>/<ol> no es un hijo directo válido de otro <ul>/<ol>.
Puedes mezclar tipos de lista: una lista ordenada puede estar anidada dentro de una lista no ordenada, y viceversa. Los navegadores aplican automáticamente una sangría a cada nivel anidado (mediante el padding izquierdo predeterminado en <ul>/<ol>), de modo que la jerarquía se lee con claridad.
Ejemplo de una lista anidada mixta (lista ordenada dentro de una lista no ordenada):
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Shopping list</h2>
<ul>
<li>Fruit</li>
<li>
Drinks, in order of preference:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Water</li>
</ol>
</li>
<li>Bread</li>
</ul>
</body>
</html>Control del Conteo en Listas
De forma predeterminada, una lista ordenada numera sus elementos comenzando desde 1. Tres atributos permiten modificar este comportamiento:
start(en<ol>) — el número desde el que comienza el conteo de la lista.reversed(en<ol>) — cuenta de forma descendente en lugar de ascendente.value(en un<li>concreto) — establece manualmente el número de ese elemento; los elementos siguientes continúan desde él.
Uso de start para continuar una lista entre secciones
El atributo start es especialmente útil cuando una única lista lógica se interrumpe con encabezados, imágenes o párrafos. Por ejemplo, si la sección uno termina en el paso 39, puedes continuar los pasos en la sección dos con <ol start="40"> para que la numeración sea correcta tras la interrupción.
Ejemplo de una lista HTML con conteo desde un número específico:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>List counting control</h2>
<p>Continuing a procedure whose first section ended at step 39.</p>
<ol start="40">
<li>Pen</li>
<li>Pencil</li>
<li>Copybook</li>
</ol>
<ol type="I" start="40">
<li>Pen</li>
<li>Pencil</li>
<li>Copybook</li>
</ol>
</body>
</html>Ejemplo de reversed y value:
El atributo reversed numera la lista de mayor a menor — útil para cuentas regresivas o clasificaciones de «los N mejores» mostradas de peor a mejor. El atributo value en un <li> concreto salta el conteo a un número específico, y los elementos posteriores continúan desde ahí.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>A reversed list (countdown)</h2>
<ol reversed>
<li>Bronze medal</li>
<li>Silver medal</li>
<li>Gold medal</li>
</ol>
<h2>Setting an item's number with value</h2>
<ol>
<li>First</li>
<li value="5">Jumps to 5</li>
<li>Continues at 6</li>
</ol>
</body>
</html>La lista invertida anterior se renderiza como 3. Bronze medal, 2. Silver medal, 1. Gold medal. En la segunda lista, el segundo elemento se fuerza a 5, por lo que el tercer elemento muestra 6.
Accesibilidad en Listas HTML
Las listas transmiten significado para las tecnologías de asistencia, no solo estilo visual. Cuando un lector de pantalla llega a un <ul>, <ol> o <dl>, anuncia el rol de la lista y normalmente el número de elementos (por ejemplo, «lista, 3 elementos») y luego la posición de cada elemento. Ese contexto ayuda a los usuarios que no pueden ver las viñetas o los números a comprender la estructura, por lo que elegir el tipo de lista correcto también es una decisión de accesibilidad.
Algunas pautas prácticas:
- Eliminar los marcadores puede eliminar la semántica de lista. En Safari con VoiceOver, aplicar
list-style: none(habitual en menús de navegación y listas con estilo personalizado) puede hacer que el navegador descarte el rol implícito de lista, de modo que esta ya no se anuncia como tal. Para mantener la semántica, añade unrole="list"explícito:
<ul role="list" style="list-style: none;">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>- Envuelve las listas de navegación en
<nav>. Un menú de sitio es convencionalmente una lista de enlaces dentro de un punto de referencia<nav>. El<nav>expone un punto de referencia de navegación al que los usuarios de lectores de pantalla pueden saltar, mientras que el<ul>interior mantiene los elementos agrupados y contados.
<nav aria-label="Main">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>- Usa
<ol>cuando el orden sea significativo (pasos, clasificaciones, instrucciones) y<ul>cuando no lo sea — los lectores de pantalla anuncian las posiciones en listas ordenadas, por lo que la distinción se transmite a los usuarios y no solo se muestra visualmente.
Lista Horizontal con CSS
Las listas HTML pueden estilizarse de muchas formas diferentes con CSS.
Puedes dar estilo a las listas HTML usando diferentes propiedades CSS. Por ejemplo, puedes crear un menú de navegación estableciendo list-style-type: none para eliminar las viñetas y display: flex para disponer los elementos en fila.
Los colores a continuación están escritos como valores hexadecimales literales para mantener el ejemplo autónomo; en un proyecto real normalmente harías referencia a las variables de color de tu sistema de diseño (propiedades personalizadas de CSS) en lugar de codificar valores hexadecimales.
Ejemplo de una lista horizontal con CSS:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
background-color: #F44336;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #981816;
}
</style>
</head>
<body>
<h2>Navigation Menu Example</h2>
<p>
You can style HTML lists using different CSS properties. For example, you can create a navigation menu styling the list horizontally.
</p>
<ul>
<li>
<a href="#home">Home</a>
</li>
<li>
<a href="https://www.w3docs.com/tool/">Tools</a>
</li>
<li>
<a href="https://www.w3docs.com/snippets">Snippets</a>
</li>
<li>
<a href="https://www.w3docs.com/quiz/">Quizzes</a>
</li>
<li>
<a href="https://www.w3docs.com/string-functions/">String Functions</a>
</li>
</ul>
</body>
</html>