Validación HTML: Se encontró una etiqueta de cierre después de que "body" había sido cerrado.

Acerca de este problema HTML

Todo documento HTML válido sigue una estructura estricta: una declaración <!DOCTYPE html>, seguida por un elemento <html> que contiene exactamente dos hijos — <head> y <body>. Todo el contenido visible y su markup asociado debe estar dentro de <body>. Una vez que el navegador encuentra la etiqueta de cierre </body>, no espera nada más excepto la etiqueta de cierre </html>.

Cuando una etiqueta de cierre aparece después de que </body> ha sido cerrado, el analizador del navegador entra en un modo de recuperación de errores. Mientras que la mayoría de navegadores intentarán manejar esto de manera elegante, el comportamiento no está garantizado de ser consistente. Esto puede llevar a estructuras DOM inesperadas, lo cual puede causar problemas con JavaScript que depende del árbol DOM, romper estilos CSS, o crear problemas de accesibilidad para lectores de pantalla que dependen de una estructura de documento adecuada.

Este problema comúnmente surge de:

Etiquetas de cierre adicionales o duplicadas — por ejemplo, un </div> extra que no coincide con ningún elemento abierto dentro de <body>.
Colocar elementos accidentalmente después de </body> — como mover un <script> o </div> fuera del body durante la edición.
Errores de copiar-pegar — fragmentos de markup pegados en la ubicación incorrecta.
Problemas de plantillas o CMS — plantillas del lado del servidor que inyectan etiquetas de cierre en el orden incorrecto.

Para solucionarlo, revisa tu estructura de documento cuidadosamente. Asegúrate de que cada etiqueta de apertura dentro de <body> tenga una etiqueta de cierre correspondiente también dentro de <body>. Asegúrate de que nada aparezca entre </body> y </html> excepto espacios en blanco.

Ejemplos

Incorrecto — etiqueta de cierre después de que body está cerrado

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Page</title>
  </head>
  <body>
    <div>
      <p>Hello world</p>
    </div>
  </body>
  </div>
</html>

Aquí, un </div> extra se encuentra entre </body> y </html>. Esto desencadena el error de validación porque el body ya ha sido cerrado cuando el analizador encuentra </div>.

Incorrecto — etiqueta script colocada después de body

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Page</title>
  </head>
  <body>
    <p>Hello world</p>
  </body>
  <script src="app.js"></script>
</html>

Aunque los navegadores típicamente aún ejecutarán el script, colocarlo después de </body> es inválido y produce esta advertencia.

Correcto — todo el contenido y etiquetas dentro de body

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Page</title>
  </head>
  <body>
    <div>
      <p>Hello world</p>
    </div>
    <script src="app.js"></script>
  </body>
</html>

Todos los elementos, incluyendo etiquetas <script>, están correctamente anidados dentro del elemento <body>. Lo único que sigue a </body> es </html>.

Consejo de depuración

Si tu documento es grande y tienes problemas para encontrar la etiqueta suelta, prueba estos enfoques:

Cuenta tus etiquetas — asegúrate de que cada etiqueta de apertura (como <div>) tenga exactamente un </div> correspondiente dentro de <body>.
Usa un editor con coincidencia de llaves — la mayoría de editores de código pueden resaltar etiquetas de apertura/cierre correspondientes, haciendo que las etiquetas huérfanas sean fáciles de detectar.
Revisa el número de línea del validador — el validador del W3C reporta la línea donde se encontró la etiqueta de cierre suelta, lo cual te apunta directamente al problema.
Indenta apropiadamente — la indentación consistente hace que los problemas estructurales sean visualmente obvios.