Validación HTML: Etiqueta de cierre perdida "X".

Acerca de este problema HTML

El analizador HTML procesa las etiquetas secuencialmente, manteniendo una pila de elementos abiertos. Cuando encuentra una etiqueta de cierre como </div>, busca un <div> de apertura que coincida en el ámbito actual. Si no existe ningún elemento abierto que coincida, la etiqueta de cierre está “perdida” — no tiene a dónde ir y viola la especificación HTML. Los navegadores ignorarán silenciosamente las etiquetas de cierre perdidas en la mayoría de los casos, pero su presencia señala problemas estructurales en tu marcado que pueden llevar a problemas impredecibles de renderizado y diseño.

Este error importa por varias razones. Primero, las etiquetas de cierre perdidas a menudo indican un problema estructural más profundo — si tienes un </div> extra, tu anidación de diseño puede estar mal incluso si el navegador lo renderiza aceptablemente hoy. Segundo, las tecnologías asistivas como los lectores de pantalla dependen de la estructura correcta del documento para transmitir significado, y el HTML mal formado puede confundirlas. Tercero, el marcado limpio y válido es más fácil de mantener y depurar, especialmente en proyectos colaborativos.

Hay varias causas comunes de este error:

Etiquetas de cierre duplicadas — La causa más frecuente. Accidentalmente cierras el mismo elemento dos veces, así que la segunda etiqueta de cierre está perdida.

Restos de copiar-pegar — Al mover o eliminar bloques de HTML, una etiqueta de cierre se queda atrás sin su etiqueta de apertura correspondiente.

Anidación mal emparejada — Los elementos están anidados incorrectamente, causando que el analizador cierre las etiquetas en un orden inesperado y deje etiquetas de cierre huérfanas.

Cerrar elementos vacíos — Los elementos vacíos como <br>, <img>, <hr>, y <input> nunca tienen etiquetas de cierre. Escribir </br> o </img> producirá este error.

Para corregir el problema, busca en tu documento la etiqueta de cierre perdida mencionada en el error, luego elimínala si es un duplicado o añade/mueve la etiqueta de apertura correspondiente si falta una.

Ejemplos

Etiqueta de cierre duplicada

Este es el escenario más común — un elemento se cierra dos veces:

<!-- ❌ Malo: </ul> duplicado -->

<ul>
  <li>Item one</li>
  <li>Item two</li>
</ul>
</ul>

Elimina la etiqueta de cierre extra:

<!-- ✅ Bueno -->

<ul>
  <li>Item one</li>
  <li>Item two</li>
</ul>

Resto de copiar-pegar

Después de editar, una etiqueta de cierre permanece sin su contraparte de apertura:

<!-- ❌ Malo: </p> perdida sin <p> que coincida -->

<div>
  <h2>Title</h2>
  </p>
  <span>Some text</span>
</div>

Elimina el </p> huérfano:

<!-- ✅ Bueno -->

<div>
  <h2>Title</h2>
  <span>Some text</span>
</div>

Anidación mal emparejada

Los elementos anidados incorrectamente pueden producir etiquetas de cierre perdidas:

<!-- ❌ Malo: </section> se cierra antes que </div>, dejando </div> perdida -->

<section>
  <div>
    <p>Content here</p>
  </section>
  </div>

Corrige la anidación para que los elementos internos se cierren antes que los externos:

<!-- ✅ Bueno -->

<section>
  <div>
    <p>Content here</p>
  </div>
</section>

Cerrar un elemento vacío

Los elementos vacíos no tienen etiqueta de cierre. Añadir una produce un error de etiqueta de cierre perdida:

<!-- ❌ Malo: <br> e <img> son elementos vacíos -->

<p>Line one<br></br>Line two</p>
<img src="photo.jpg" alt="A photo"></img>

Elimina las etiquetas de cierre para elementos vacíos:

<!-- ✅ Bueno -->

<p>Line one<br>Line two</p>
<img src="photo.jpg" alt="A photo">

Múltiples etiquetas perdidas de un contenedor eliminado

Cuando eliminas la etiqueta de apertura de un elemento contenedor pero olvidas la etiqueta de cierre:

<!-- ❌ Malo: <main> fue eliminado pero </main> permanece -->

<body>
  <h1>Welcome</h1>
  <p>Hello world</p>
  </main>
</body>

Elimina el </main> perdido o restaura la etiqueta de apertura:

<!-- ✅ Bueno: etiqueta perdida eliminada -->

<body>
  <h1>Welcome</h1>
  <p>Hello world</p>
</body>

<!-- ✅ También bueno: contenedor restaurado -->

<body>
  <main>
    <h1>Welcome</h1>
    <p>Hello world</p>
  </main>
</body>

Al trabajar con HTML profundamente anidado, usar sangría consistente y un editor con coincidencia de corchetes/etiquetas hace mucho más fácil detectar estos problemas antes de que lleguen a la validación. Muchos editores de código también resaltan etiquetas no emparejadas en tiempo real.