Etiqueta de cierre “li” encontrada, pero había elementos abiertos.

Cuando el analizador HTML encuentra una etiqueta de cierre </li>, espera que todos los elementos anidados dentro de ese elemento de lista ya estén cerrados. Si algún elemento hijo permanece abierto, el navegador debe adivinar dónde cerrarlo, lo que puede llevar a una estructura DOM inesperada. Este error típicamente ocurre cuando se omite accidentalmente una etiqueta de cierre, se escribe mal, o se coloca en el orden incorrecto.

Esto importa por varias razones. Primero, los navegadores pueden interpretar la estructura prevista de manera diferente, causando renderizado inconsistente entre plataformas. Segundo, las tecnologías asistivas como los lectores de pantalla dependen de un DOM bien formado para transmitir el contenido correctamente — los elementos no cerrados pueden confundir el orden de lectura o la agrupación del contenido. Tercero, los elementos no cerrados pueden crear errores de validación en cascada, haciendo más difícil identificar los problemas reales en tu marcado.

Las causas comunes de este error incluyen:

• Olvidar cerrar un elemento en línea como <span>, <a>, <strong>, o <em> dentro de un elemento de lista.
• Olvidar cerrar un elemento de bloque como <div> o <p> dentro de un elemento de lista.
• Anidar elementos en el orden incorrecto, por lo que las etiquetas de cierre no coinciden con sus etiquetas de apertura.
• Errores tipográficos en las etiquetas de cierre (p. ej., </sapn> en lugar de </span>).

Para solucionar el problema, localiza el <li> mencionado en el error y verifica cada elemento abierto dentro de él. Asegúrate de que cada uno tenga una etiqueta de cierre correspondiente y correctamente escrita, y que se cierren en el orden inverso al que se abrieron (último abierto, primero cerrado).

Ejemplos

Etiqueta de cierre faltante en un elemento en línea

❌ Inválido: El <span> nunca se cierra antes de </li>.

<ul>
  <li>
    <span>Texto de ejemplo
  </li>
</ul>

✅ Válido: El <span> se cierra correctamente.

<ul>
  <li>
    <span>Texto de ejemplo</span>
  </li>
</ul>

Etiqueta de cierre faltante en un enlace

❌ Inválido: El elemento <a> queda abierto.

<ul>
  <li>
    <a href="/about">Acerca de nosotros
  </li>
  <li>
    <a href="/contact">Contacto</a>
  </li>
</ul>

✅ Válido: Ambos elementos <a> se cierran antes de su </li> padre.

<ul>
  <li>
    <a href="/about">Acerca de nosotros</a>
  </li>
  <li>
    <a href="/contact">Contacto</a>
  </li>
</ul>

Múltiples elementos anidados sin cerrar

❌ Inválido: Tanto <strong> como <a> quedan abiertos dentro del <li>.

<ol>
  <li>
    <a href="/sale"><strong>Gran oferta
  </li>
</ol>

✅ Válido: Los elementos anidados se cierran en orden inverso (el más interno primero).

<ol>
  <li>
    <a href="/sale"><strong>Gran oferta</strong></a>
  </li>
</ol>

Etiqueta de cierre mal escrita

❌ Inválido: La etiqueta de cierre </sapn> no coincide con <span>, por lo que el <span> permanece abierto.

<ul>
  <li>
    <span>Elemento uno</sapn>
  </li>
</ul>

✅ Válido: La etiqueta de cierre está escrita correctamente.

<ul>
  <li>
    <span>Elemento uno</span>
  </li>
</ul>

Etiquetas de cierre en orden incorrecto

❌ Inválido: Las etiquetas </em> y </strong> se cierran en el orden incorrecto, dejando <em> efectivamente sin cerrar cuando se alcanza </strong>.

<ul>
  <li>
    <strong><em>Nota importante</strong></em>
  </li>
</ul>

✅ Válido: Las etiquetas de cierre están en el orden inverso correcto.

<ul>
  <li>
    <strong><em>Nota importante</em></strong>
  </li>
</ul>

Más información:

MDN Reference

HTML li element

→

WHATWG Spec

HTML spec: Grouping content

→

web.dev Article

Learn HTML: Lists

→