Acerca de este problema HTML
Cuando el navegador encuentra una etiqueta </body> mientras elementos como <div>, <section>, <p>, o <span> siguen abiertos, debe adivinar dónde se suponía que esos elementos debían terminar. Diferentes navegadores pueden adivinar de manera diferente, llevando a un renderizado inconsistente y una estructura DOM que no coincide con tu intención. Esto puede causar problemas de diseño, estilos rotos y problemas de accesibilidad — los lectores de pantalla dependen de un DOM bien formado para transmitir la estructura correcta del documento a los usuarios.
Las causas principales de este error típicamente incluyen:
- Olvidar una etiqueta de cierre — el escenario más común, especialmente con estructuras muy anidadas.
-
Etiquetas no coincidentes — etiquetas de cierre que no corresponden a sus etiquetas de apertura (por ejemplo, abrir un
<div>pero cerrarlo con</section>). - Errores de copiar-pegar — duplicar o eliminar código que deja atrás etiquetas de apertura huérfanas.
- Anidamiento incorrecto — elementos superpuestos donde las etiquetas cruzan límites en lugar de estar correctamente anidadas.
Para solucionar el problema, trabaja a través de la lista de errores del validador de arriba hacia abajo. El mensaje de error generalmente identifica qué elementos están sin cerrar. Encuentra cada uno y añade la etiqueta de cierre faltante en la posición correcta o elimina la etiqueta de apertura innecesaria. Usar indentación consistente hace mucho más fácil detectar discrepancias visualmente.
Ejemplos
Etiqueta de cierre faltante
Esto provoca el error porque el elemento <section> nunca se cierra:
<body>
<section>
<h1>Welcome</h1>
<p>Hello, world!</p>
</body>
Añade la etiqueta de cierre </section> faltante:
<body>
<section>
<h1>Welcome</h1>
<p>Hello, world!</p>
</section>
</body>Múltiples elementos sin cerrar
Aquí, tanto el <div> como el <ul> quedan abiertos:
<body>
<div class="sidebar">
<ul>
<li>Home</li>
<li>About</li>
</body>Cierra cada elemento en el orden correcto (reverso):
<body>
<div class="sidebar">
<ul>
<li>Home</li>
<li>About</li>
</ul>
</div>
</body>Etiqueta de cierre no coincidente
Una discrepancia entre etiquetas de apertura y cierre también puede producir este error. El <div> se abre pero </section> se usa para cerrarlo, dejando el <div> sin cerrar:
<body>
<div class="content">
<p>Some text here.</p>
</section>
</body>Corrige la etiqueta de cierre para que coincida con la etiqueta de apertura:
<body>
<div class="content">
<p>Some text here.</p>
</div>
</body>Elementos superpuestos (incorrectamente anidados)
Los elementos que se superponen en lugar de anidarse correctamente también provocarán este error. Aquí las etiquetas <b> e <i> cruzan los límites de cada una:
<body>
<p><b>Bold and <i>italic</b> text</i></p>
</body>Asegúrate de que los elementos se cierren en el orden inverso al que se abrieron:
<body>
<p><b>Bold and <i>italic</i></b><i> text</i></p>
</body>Encuentra problemas como este automáticamente
Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.