Acerca de este problema HTML
La especificación HTML define una estructura estricta para los documentos: el elemento <html> contiene un <head> y un <body>, y todo el contenido visible de la página debe estar dentro del <body>. Una vez que el navegador encuentra la etiqueta de cierre </body>, espera nada más que espacios en blanco opcionales (espacios, tabulaciones, saltos de línea) antes de la etiqueta de cierre </html>. Cualquier carácter que no sea un espacio en ese hueco — ya sea texto, elementos HTML, etiquetas script, o incluso puntuación extraviada — se considera fuera del cuerpo del documento y desencadena este error de validación.
Por qué esto importa
-
Cumplimiento de estándares: El estándar HTML vigente (WHATWG) es claro en que el contenido después de
</body>no es válido. La validación de W3C marcará esto como un error. -
Renderizado impredecible: Los navegadores usan recuperación de errores para manejar contenido mal ubicado, y diferentes navegadores pueden manejarlo de manera diferente. La mayoría reabrirá implícitamente el
<body>y moverá el contenido dentro de él, pero depender de este comportamiento es frágil e impredecible. - Accesibilidad: Los lectores de pantalla y tecnologías de asistencia analizan la estructura del DOM. El contenido que termina en lugares inesperados debido a la recuperación de errores puede ser anunciado fuera de orden o perderse por completo.
-
Mantenibilidad: El contenido extraviado después de
</body>a menudo es una señal de un problema de organización del código — un include mal colocado, un problema de renderizado de plantillas, o un pegado accidental — y limpiarlo mejora la mantenibilidad a largo plazo.
Causas comunes
-
Texto accidental o errores tipográficos después de la etiqueta de cierre
</body>. -
Etiquetas script o de analítica ubicadas por error entre
</body>y</html>en lugar de al final del<body>. - Motores de plantillas del lado del servidor que agregan contenido después del body en un archivo de diseño.
-
Comentarios o salida de depuración dejados atrás después de
</body>.
Ejemplos
Texto extraviado después de </body>
Esto desencadena el error de validación porque el texto this is invalid aparece después de </body>:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
</head>
<body>
<p>Content goes here.</p>
</body> this is invalid
</html>
Mueve todo el contenido dentro del <body>:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
</head>
<body>
<p>Content goes here.</p>
</body>
</html>
Script colocado fuera del body
Un error común es colocar una etiqueta <script> entre </body> y </html>:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
</head>
<body>
<p>Main content</p>
</body>
<script src="analytics.js"></script>
</html>
Coloca el script al final del <body> en su lugar:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
</head>
<body>
<p>Main content</p>
<script src="analytics.js"></script>
</body>
</html>
Elemento HTML extraviado después de </body>
A veces un elemento como un <div> termina después del body debido a un problema de plantilla:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
</head>
<body>
<main>Page content</main>
</body>
<div id="overlay"></div>
</html>
Muévelo dentro de <body>:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
</head>
<body>
<main>Page content</main>
<div id="overlay"></div>
</body>
</html>
La solución es siempre la misma: asegúrate de que todo entre </body> y </html> sea espacios en blanco o nada en absoluto. Todo el contenido — texto, elementos, scripts y comentarios — pertenece dentro del elemento <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.