Validación HTML: La etiqueta de cierre X no coincide con el nombre del elemento abierto actual Y.

Acerca de este problema HTML

HTML sigue reglas estrictas de anidación: los elementos deben cerrarse en el orden inverso al que se abrieron, como una pila. Cuando el validador encuentra </X> pero el elemento abierto actual es Y, significa que algo ha salido mal en la estructura del documento. El analizador del navegador intentará recuperarse de esta discrepancia, pero el resultado puede no reflejar tu diseño o semántica pretendidos.

Hay varias causas comunes para este error:

Errores tipográficos en nombres de etiquetas — por ejemplo, abrir un <div> pero cerrarlo con </dvi>.
Etiquetas no coincidentes — abrir un elemento pero cerrar uno diferente, como <strong> cerrado con </em>.
Orden de anidación incorrecto — elementos superpuestos donde las etiquetas cruzan límites en lugar de estar anidadas correctamente.
Etiquetas de cierre faltantes — una etiqueta de cierre olvidada hace que las etiquetas de cierre posteriores se desalineen con la expectativa del analizador.

Esto importa porque HTML anidado incorrectamente puede causar renderizado impredecible entre navegadores, romper el estilo CSS, interferir con la manipulación del DOM de JavaScript y crear problemas de accesibilidad para lectores de pantalla que dependen de un árbol de documento bien formado.

Para corregir este error, rastrea hacia atrás desde la línea reportada para encontrar dónde se origina la discrepancia. Asegúrate de que cada etiqueta de apertura tenga una etiqueta de cierre correspondiente con exactamente el mismo nombre, y que los elementos se cierren en el orden correcto (último abierto, primero cerrado).

Ejemplos

Error tipográfico en la etiqueta de cierre

<!-- ❌ Incorrecto: etiqueta de cierre mal escrita -->

<section>
  <p>Hello world</p>
</secton>

<!-- ✅ Corregido: etiqueta de cierre coincide con la etiqueta de apertura -->

<section>
  <p>Hello world</p>
</section>

Etiquetas no coincidentes

<!-- ❌ Incorrecto: <strong> está cerrado con </em> -->

<p>This is <strong>important</em> text.</p>

<!-- ✅ Corregido: etiqueta de cierre coincide con la etiqueta de apertura -->

<p>This is <strong>important</strong> text.</p>

Elementos anidados incorrectamente (superpuestos)

<!-- ❌ Incorrecto: <b> e <i> se superponen -->

<p><b>Bold <i>and italic</b> text</i></p>

El validador ve </b> cuando el elemento abierto actual es <i>. Los elementos deben anidarse completamente uno dentro del otro sin superponerse.

<!-- ✅ Corregido: elementos anidados correctamente -->

<p><b>Bold <i>and italic</i></b><i> text</i></p>

Etiqueta de cierre faltante que causa una cascada de errores

<!-- ❌ Incorrecto: falta </div> para el div interno -->

<div class="outer">
  <div class="inner">
    <p>Content</p>
</div>

Aquí el único </div> cierra inner, dejando outer sin cerrar. Si sigue más HTML, las etiquetas de cierre posteriores se desalinearán, potencialmente produciendo este error más adelante en el documento.

<!-- ✅ Corregido: ambos divs están cerrados correctamente -->

<div class="outer">
  <div class="inner">
    <p>Content</p>
  </div>
</div>

Consejos para depurar

Trabaja desde el primer error — en la validación HTML, un error temprano puede provocar muchos errores posteriores en cascada. Corrige la primera discrepancia reportada y vuelve a validar antes de abordar errores posteriores.
Usa sangría consistente — el código con sangría apropiada hace mucho más fácil detectar dónde falla la anidación.
Usa un editor con coincidencia de corchetes/etiquetas — la mayoría de editores de código pueden resaltar etiquetas de apertura y cierre coincidentes, haciendo que las discrepancias sean inmediatamente visibles.