<li>

<li> (list item, ítem de lista) es el elemento que representa cada entrada individual dentro de una lista. Es el hijo directo que <ul> y <ol> esperan: no podés tener una lista sin <li>, y un <li> no tiene sentido fuera de <ul> u <ol> (fuera de esos contextos el HTML es técnicamente inválido).

Lo que distingue a <li> de un párrafo suelto o de un <span> es que comunica estructura de grupo: cada <li> es una unidad dentro de un conjunto. Los lectores de pantalla anuncian el número de ítems al entrar a la lista y el número de ítem actual al leerlos ("ítem 2 de 5"). Esa información viene de <li> dentro de su contenedor; no existe si se simulan listas con párrafos y guiones.

El modelo de contenido de <li> es uno de los más flexibles del HTML: puede contener texto plano, elementos en línea (<strong>, <em>, <a>, <abbr>), elementos de bloque (<p>, <div>, <ul>, <ol>), e incluso otra lista completa anidada. Esa flexibilidad hace posible las listas complejas —menús con submenús, listas de términos con párrafos de explicación, ítems con imágenes— sin salir del modelo de lista.

Cómo funciona

<li> genera un ítem de lista. Dentro de <ul> hereda el marcador de viñeta; dentro de <ol> recibe el número de secuencia correspondiente. El estilo del marcador se hereda del padre por CSS.

El navegador calcula el número de <li> dentro de <ol> automáticamente — si insertás o borrás un <li>, todos los números se recalculan. El atributo value del <li> (solo en <ol>) permite romper esa secuencia para un ítem específico.

Modelo de contenido

<li> acepta contenido de flujo: texto, elementos en línea, elementos de bloque, e incluso otra <ul> u <ol> completa. Esa lista anidada va dentro del <li>, no después.

<!-- li con contenido mixto: texto + lista anidada -->
<ul>
  <li>
    <strong>Frutas</strong>
    <ul>
      <li>Manzana</li>
      <li>Pera</li>
    </ul>
  </li>
  <li>Verduras</li>
</ul>

Sintaxis

<!-- En ul: li recibe viñeta -->
<ul>
  <li>Pan</li>
  <li>Leche con <em>descremada</em></li>
  <li><strong>Importante:</strong> sin gluten</li>
</ul>

<!-- En ol: li recibe número automático -->
<ol>
  <li>Precalentar el horno</li>
  <li>Mezclar los ingredientes</li>
  <li>Hornear 30 minutos</li>
</ol>

Atributos

value (solo en <ol>)

Reposiciona el contador a partir de ese ítem. Los ítems posteriores continúan desde el nuevo valor.

<ol>
  <li>Primer paso</li>
  <li>Segundo paso</li>
  <li value="10">Este ítem es el 10</li>
  <li>Este ítem es el 11</li>
</ol>

Caso de uso: listas con saltos intencionales de numeración, por ejemplo para referenciar ítems específicos en un documento legal o técnico.

value acepta solo enteros. En <ul> el atributo no tiene efecto.

Accesibilidad

El rol implícito de <li> es listitem. Los lectores de pantalla pueden anunciar “ítem 2 de 5” al leer cada elemento. El contexto de la lista es esencial: <li> fuera de <ul> u <ol> pierde esa semántica.

Cuándo usar qué tipo de contenido dentro de <li>

Notas, gotchas e interacción

• <li> fuera de <ul> u <ol> es HTML inválido. El navegador lo renderiza igual (modo quirks), pero el árbol de accesibilidad pierde la semántica de lista.
• La lista anidada va dentro del <li>, nunca como hermana del <li>. El patrón <ul><li>Texto</li><ul>...</ul></ul> es inválido; el correcto es <ul><li>Texto <ul>...</ul></li></ul>.
• El value cambia la numeración hacia adelante. Si se pone value="10" en el tercer ítem, el cuarto pasa a ser 11 automáticamente.
• Texto dentro de <li> pero fuera de un elemento en línea es válido. No hace falta envolver cada texto en <p> si el ítem es simple.

Vigente / legacy

<li> está completamente vigente. El atributo type (para cambiar el marcador del ítem individual) es legacy desde HTML4 — se maneja con CSS (list-style-type en el ítem o heredado del padre). El atributo value en <ol> sigue vigente.