Etiqueta li en HTML: elementos y anidación de listas
La etiqueta <li> en HTML representa un elemento de una lista <ul>, <ol> o <menu>. Úsala para separar cada entrada de un temario, cada paso de unas instrucciones o cada acción de una lista de comandos. El contenedor indica qué clase de lista tienes; cada <li> reúne el contenido de una de sus entradas.
<ol>
<li>Introducción</li>
<li value="5">Tema avanzado</li>
<li>Práctica</li>
</ol>El resultado normal muestra tres elementos numerados 1, 5 y 6. value="5" establece el número del segundo elemento y la numeración continúa desde ahí. «Tema avanzado» es el contenido visible: el atributo no lo reemplaza ni añade texto dentro de la etiqueta.
Sintaxis y contexto válido
Escribe <li>Contenido</li> como hijo de <ul>, <ol> o <menu>. No lo coloques suelto dentro de un <div> o de un párrafo. Tampoco envuelvas cada <li> en un <div> directamente bajo la lista: los elementos deben conservar su relación con el contenedor.
Los ejemplos incluyen </li> para mostrar los límites de cada entrada. En la sintaxis HTML puedes omitir el cierre cuando el elemento va seguido inmediatamente por otro <li> o cuando no queda más contenido en su padre. La apertura no se omite. Estas condiciones y el contenido permitido están definidos en la sección de <li> del HTML Living Standard.
Qué puede contener un elemento de lista
<li> admite contenido de flujo: texto, párrafos, encabezados, enlaces, imágenes y sublistas, respetando las reglas de cada elemento interior. Una entrada puede ser una palabra o varios bloques relacionados; no hace falta crear un <li> por cada línea visual.
Para anidar una lista, coloca un nuevo <ul> o <ol> dentro del <li> al que pertenecen los subtemas, antes de su cierre. Los elementos de esa sublista tendrán sus propios <li>. Así puedes tener un <li> dentro de otro como descendiente, pero entre ambos debe existir el contenedor de la sublista: no pongas un <li> directamente dentro de otro <li>.
Cómo cambia la numeración con value
El atributo específico vigente value acepta un entero y fija el valor ordinal de un elemento de <ol>. En el ejemplo inicial, cambia value="5" por value="8": obtendrás 1, 8 y 9. Si retiras el atributo, la lista recupera 1, 2 y 3. No escribas value="cinco" ni value="5.5", porque no son enteros válidos.
Los elementos siguientes continúan según la dirección de la lista. En una lista descendente, declarada con reversed en <ol>, después de un <li value="5"> viene el 4. start y reversed pertenecen a <ol>; value permite intervenir en una entrada concreta.
¿Qué hace value en <ul>? No cambia sus viñetas ni tiene allí la función ordinal de <ol>; no debes usarlo en <ul> ni en <menu>. No representa un valor para enviar desde un formulario, como puede ocurrir con <option>. Si una entrada contiene un control, sus datos los define ese control.
Ejemplo práctico: un temario con subtemas
Guarda este documento como temario.html con codificación UTF-8 y ábrelo en el navegador. Está completo y no necesita CSS, JavaScript, servidor ni archivos adicionales.
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Temario del taller de HTML</title>
</head>
<body>
<h1>Temario del taller de HTML</h1>
<ul>
<li>
<h2>Estructura del documento</h2>
<p>Aprende a organizar una página y a identificar sus partes.</p>
<p><a href="#practica">Ir a la práctica del taller</a></p>
<ul>
<li>Idioma y título de la página.</li>
<li>Encabezados y párrafos.</li>
</ul>
</li>
<li>
<h2 id="practica">Práctica del taller</h2>
<p>Crea una página con el temario de una actividad que conozcas.</p>
</li>
</ul>
</body>
</html>- Observa las dos entradas principales, cada una con título y descripción. La primera reúne también un enlace y una sublista de dos temas, que normalmente se presenta con otra sangría y un marcador distinto.
- Pulsa Tab para llegar al enlace y Enter para ir a «Práctica del taller». El destino está en el mismo documento; funciona sin JavaScript.
- Reduce la ventana: los párrafos deben ajustarse al ancho y conservar su orden. Para probar el ejemplo mínimo, usa este documento y sustituye el
<ul>completo por el primer bloque<ol>.
Cada <li> exterior reúne un tema completo: título, descripción y, cuando corresponde, subtemas. Un <div> en su lugar dejaría un hijo no permitido directamente bajo <ul>.
Error de anidación: una sublista directamente en ul
Este fragmento es incorrecto, aunque un navegador pueda mostrarlo con sangría:
<!-- Incorrecto: la segunda ul no está dentro de una entrada. -->
<ul>
<li>Estructura del documento</li>
<ul>
<li>Encabezados y párrafos.</li>
</ul>
</ul>La corrección consiste en mover la sublista antes del </li> de «Estructura del documento», como en el temario completo. Una sublista no debe ser hermana de las entradas principales: es parte de la entrada que desarrolla. No confíes en que una apariencia aceptable confirme que la estructura es válida.
Atributos, apariencia y accesibilidad
Además de value, <li> admite atributos globales. id identifica una entrada para enlazarla y class permite seleccionarla desde CSS. Para cambiar el marcador, usa la propiedad CSS list-style-type; el antiguo atributo type de <li> está obsoleto.
Conserva listas reales en vez de escribir viñetas a mano en párrafos. La estructura permite exponer la lista y sus elementos a las tecnologías de asistencia. En este contexto, <li> tiene la semántica nativa de listitem; no necesita un role="listitem" redundante. ARIA en HTML describe esta semántica. El anuncio concreto depende del navegador y del lector de pantalla.
Un <li> no es un control ni necesita tabindex. Los enlaces y botones interiores sí tienen su propio comportamiento de teclado. La sangría y los marcadores forman parte de la presentación predeterminada de las listas; cambiar su CSS no convierte un párrafo en un elemento de lista ni corrige una anidación inválida.
¿Li se puede usar sin ul u ol? Etiquetas relacionadas
También puedes usar <li> en <menu>, para una lista de comandos. No lo uses como elemento aislado en el marcado normal de una página.
<ul>agrupa elementos cuyo orden no determina el significado, como los temas del ejemplo.<ol>agrupa una secuencia en la que el orden importa, como los pasos de una tarea.<li>representa cada paso, no toda la secuencia.<menu>agrupa comandos; por sí solo no implementa un widget de menú con navegación mediante flechas.<dl>organiza términos y descripciones mediante<dt>y<dd>, en lugar de entradas<li>.
Compatibilidad y fuentes
Compatibilidad consultada el 3 de octubre de 2026: MDN clasifica <li> como ampliamente disponible y documenta el atributo value.
El HTML Living Standard fija el significado, los contextos y las reglas de numeración; MDN complementa su explicación y la información de soporte. La compatibilidad del elemento no garantiza anuncios idénticos de la numeración en todas las tecnologías de asistencia.