Validación HTML: Elemento "X" sin cerrar.

Acerca de este problema HTML

Cuando el validador reporta “Elemento ‘X’ sin cerrar”, significa que una etiqueta de apertura como <div> o <p> nunca fue terminada con su etiqueta de cierre requerida </div> o </p>, o fue cerrada fuera de orden. El analizador de HTML entonces intenta auto-cerrar elementos, lo que puede remodelar el DOM de formas que no pretendías. Esto a menudo ocurre con estructuras anidadas, ediciones de copiar y pegar, o cuando se mezclan elementos vacíos (que nunca tienen etiquetas de cierre) con elementos normales.

Dejar elementos sin cerrar puede romper el diseño y los estilos, confundir las tecnologías asistivas que dependen de una estructura bien formada, y causar que los scripts o selectores CSS se comporten de manera impredecible. También daña la portabilidad entre navegadores y herramientas, y hace que el mantenimiento sea más difícil porque el árbol renderizado difiere de lo que sugiere el código fuente.

Para arreglarlo, asegúrate de que:

Todos los elementos no vacíos tengan una etiqueta de cierre correspondiente: abre <section>, cierra con </section>.
El anidamiento esté correctamente balanceado: el último elemento abierto es el primero que cierras (LIFO).
No agregues etiquetas de cierre a elementos vacíos como br, img, input, meta, link, o hr. Estos no deben tener etiquetas de cierre en HTML, y no necesitas una barra diagonal al final.
La sintaxis de auto-cierre (<br />) está permitida pero se trata como <br> en HTML; no dependas de ella para cerrar elementos no vacíos.
Usa la función de coincidencia de corchetes/etiquetas de tu editor o formateador para detectar desajustes, y valida temprano.

Ejemplos

Ejemplo que desencadena el problema (elemento sin cerrar)

<!-- Problema: <div> nunca se cierra, y <p> se cierra después de que inicia un nuevo <div> -->

<div class="card">
  <h2>Title</h2>
  <p>Some text
<div class="footer">
  <p>Footer text</p>
</div>

Arreglado: correctamente cerrado y anidado

<div class="card">
  <h2>Title</h2>
  <p>Some text</p>
  <div class="footer">
    <p>Footer text</p>
  </div>
</div>

Ejemplo que desencadena el problema (cierre fuera de orden)

<!-- Problema: <em> se abre dentro de <strong> pero se cierra después de </strong> -->

<p><strong><em>Important</strong></em> notice</p>

Arreglado: cerrar en orden inverso al de apertura

<p><strong><em>Important</em></strong> notice</p>

Ejemplo que desencadena el problema (“cerrar” incorrectamente un elemento vacío)

<!-- Problema: los elementos vacíos no deben tener etiquetas de cierre -->

<p>Line one</p>
<br></br>
<p>Line two</p>

Arreglado: usar elementos vacíos sin etiquetas de cierre

<p>Line one</p>
<br>
<p>Line two</p>

Ejemplo de documento completo con un error común (listas y párrafos)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Unclosed Element Fix</title>
  </head>
  <body>
<!-- Problema evitado: no anides <li> a través de límites de párrafo -->

    <ul>
      <li>
        <p>Item one title</p>
        <p>Item one details</p>
      </li>
      <li>
        <p>Item two</p>
      </li>
    </ul>
  </body>
</html>

Consejos para prevenir errores de “Elemento sin cerrar”

Mantén la indentación consistente; refleja visualmente el anidamiento.
Cierra las etiquetas inmediatamente después de abrirlas, luego llena el contenido.
Usa linters/formateadores (ej., HTMLHint, Prettier) y ejecuta el validador de W3C regularmente.
Ten cuidado cuando mezcles lógica de plantillas; asegúrate de que los condicionales no omitan etiquetas de cierre requeridas.