Validación HTML: Se encontró la etiqueta de cierre X, pero había elementos abiertos.

Acerca de este problema HTML

HTML sigue un modelo de anidamiento estricto donde los elementos deben cerrarse en orden último en entrar, primero en salir (LIFO). Piénsalo como apilar cajas: debes cerrar la caja más interna antes de poder cerrar la que la contiene. Cuando escribes </li> pero un  dentro de ese <li> todavía está abierto, el navegador ve un conflicto — estás tratando de cerrar el elemento externo mientras un elemento interno está colgando.

Este error típicamente ocurre debido a una de estas situaciones:

Una etiqueta de cierre faltante para un elemento anidado (por ejemplo, olvidar  dentro de un <li>).
Etiquetas de cierre mal ordenadas donde accidentalmente cierras elementos en la secuencia incorrecta.
Errores tipográficos en nombres de etiquetas donde la etiqueta de cierre pretendida no coincide con la etiqueta de apertura, dejando el elemento real sin cerrar.

Aunque los navegadores usan algoritmos de recuperación de errores para adivinar lo que quisiste decir, diferentes navegadores pueden manejar el anidamiento malformado de manera diferente. Esto puede llevar a renderizado inconsistente, estilos rotos y estructuras DOM inesperadas. Los lectores de pantalla y otras tecnologías asistivas dependen de un árbol DOM bien formado, por lo que el anidamiento roto también puede causar problemas de accesibilidad. Mantener tu HTML correctamente anidado asegura un comportamiento predecible en todos los navegadores y herramientas.

Cómo solucionarlo

Localiza la línea referenciada en el error del validador. Te dirá qué etiqueta de cierre se encontró y qué elementos todavía estaban abiertos.
Rastrea hacia atrás desde la etiqueta de cierre para encontrar el elemento sin cerrar.
Añade la etiqueta de cierre faltante en la posición correcta, o reordena las etiquetas de cierre para que reflejen las etiquetas de apertura en reverso.
Re-valida para confirmar la solución, ya que un error de anidamiento puede generar múltiples advertencias en cascada.

Ejemplos

❌ Etiqueta de cierre faltante para un elemento anidado

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

El  dentro del primer <li> nunca se cierra. El validador ve </li> pero  todavía está abierto.

✅ Corregido: cierra primero el elemento interno

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

❌ Etiquetas de cierre mal ordenadas

<p>Este es texto <strong><em>importante</strong></em>.</p>

Aquí  aparece antes que , pero  se abrió dentro de , por lo que  debe cerrarse primero.

✅ Corregido: cierra las etiquetas en orden inverso

<p>Este es texto <strong><em>importante</em></strong>.</p>

❌ Múltiples niveles de anidamiento roto

<div>
  <section>
    <p>Hola <a href="/">mundo</p>
  </section>
</div>

El elemento <a> nunca se cierra. La etiqueta  se encuentra mientras <a> todavía está abierto.

✅ Corregido: cierra el enlace antes del párrafo

<div>
  <section>
    <p>Hola <a href="/">mundo</a></p>
  </section>
</div>

❌ Error tipográfico en una etiqueta de cierre causando discordancia

<p>Haz clic <a href="/help">aquí</b> para ayuda.</p>

El cierre  no coincide con la apertura <a>, por lo que el elemento <a> permanece abierto cuando se alcanza .

✅ Corregido: usa la etiqueta de cierre correcta

<p>Haz clic <a href="/help">aquí</a> para ayuda.</p>

Una forma útil de evitar este error es visualizar tu HTML como un esquema — cada nivel de indentación representa un nivel de anidamiento, y las etiquetas de cierre deben “desenrollarse” en orden exactamente inverso. Muchos editores de código también ofrecen características de coincidencia de corchetes y etiquetas que resaltan etiquetas no coincidentes o sin cerrar en tiempo real.