Validación HTML: No "X" element in scope but a "X" end tag seen.

Acerca de este problema HTML

Cuando el Validador HTML del W3C reporta “No X element in scope but a X end tag seen”, significa que el analizador encontró una etiqueta de cierre para un elemento que nunca fue abierto, o que ya fue cerrado. El validador rastrea qué elementos están actualmente “en el ámbito” — es decir, qué etiquetas de apertura aún esperan sus etiquetas de cierre correspondientes. Cuando aparece una etiqueta de cierre que no coincide con ningún elemento abierto en el ámbito, se genera este error.

Este problema importa por varias razones. Primero, indica HTML mal formado que los navegadores deben adivinar cómo interpretar, lo que puede llevar a una renderización inconsistente entre diferentes navegadores. Segundo, la estructura rota del documento puede confundir a las tecnologías de asistencia como los lectores de pantalla, dañando la accesibilidad. Tercero, las etiquetas de cierre perdidas pueden afectar inadvertidamente el árbol DOM de maneras inesperadas, haciendo que tu CSS y JavaScript se comporten de forma impredecible.

Hay varias causas comunes:

Cerrar una etiqueta dos veces — la causa más frecuente, donde un error de copiar y pegar o descuido lleva a una etiqueta de cierre duplicada.
Falta la etiqueta de apertura — la etiqueta de apertura correspondiente fue eliminada accidentalmente o nunca se agregó.
Etiquetas mal anidadas — los elementos se superponen en lugar de estar correctamente anidados, causando que el navegador cierre automáticamente un elemento, lo que hace que una etiqueta de cierre posterior quede huérfana.
Errores tipográficos en nombres de etiquetas — una etiqueta de apertura tiene un nombre diferente que la etiqueta de cierre (ej., <div> abierto pero </dvi> usado para cerrarlo, aunque esto usualmente genera un error diferente).

Para solucionarlo, revisa cuidadosamente el HTML alrededor de la línea señalada. Rastrea cada etiqueta de cierre hasta su etiqueta de apertura. Usar un editor de código con coincidencia de corchetes/etiquetas puede hacer esto mucho más fácil. Elimina cualquier etiqueta de cierre duplicada, agrega cualquier etiqueta de apertura faltante, o corrige el orden de anidación según sea necesario.

Ejemplos

Cerrar una etiqueta dos veces

Esta es la causa más común. La etiqueta </p> aparece dos veces:

<!-- ❌ Malo: etiqueta de cierre duplicada -->

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

Elimina la etiqueta de cierre extra:

<!-- ✅ Bueno -->

<p>Hello world</p>

Falta la etiqueta de apertura

Aquí una etiqueta de cierre </span> no tiene un <span> correspondiente:

<!-- ❌ Malo: no hay <span> de apertura -->

<div>
  Some text</span>
</div>

Agrega la etiqueta de apertura faltante o elimina la etiqueta de cierre perdida:

<!-- ✅ Bueno: etiqueta de apertura agregada -->

<div>
  <span>Some text</span>
</div>

Etiquetas mal anidadas

Cuando los elementos se superponen en lugar de anidarse correctamente, el navegador cierra automáticamente el elemento interno, dejando una etiqueta de cierre posterior huérfana:

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

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

En este caso, el navegador cierra el <i> cuando encuentra </b> (ya que <i> está dentro de <b>), por lo que el </i> posterior no tiene elemento en el ámbito. Corrígelo anidando correctamente:

<!-- ✅ Bueno: anidación correcta -->

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

Etiqueta de cierre perdida después de elemento auto-cerrado

Algunos elementos como <p> se cierran automáticamente por ciertas etiquetas subsecuentes. Esto puede llevar a etiquetas de cierre huérfanas:

<!-- ❌ Malo: <p> se auto-cierra por <div>, dejando </p> huérfano -->

<p>Some text
  <div>A block element</div>
</p>

El elemento <p> no puede contener un <div>, por lo que el navegador cierra implícitamente el <p> antes del <div>. El </p> final entonces no tiene <p> en el ámbito. Reestructura el markup:

<!-- ✅ Bueno: elementos separados -->

<p>Some text</p>
<div>A block element</div>

Consejo: usa herramientas del editor

La mayoría de los editores de código modernos pueden resaltar las etiquetas de apertura y cierre coincidentes. Si ves una etiqueta de cierre sin una coincidencia resaltada, esa es probablemente la fuente de este error. Las extensiones para VS Code, Sublime Text, y otros editores también pueden auto-formatear y validar tu HTML mientras escribes, detectando estos problemas temprano.