Verificação HTML: Caracter não-espaço após body.

Sobre este problema HTML

A especificação HTML define uma estrutura rigorosa para documentos: o elemento <html> contém um <head> e um <body>, e todo o conteúdo visível da página deve estar dentro do <body>. Assim que o navegador encontra a etiqueta de fecho </body>, espera apenas espaços em branco opcionais (espaços, tabulações, quebras de linha) antes da etiqueta de fecho </html>. Quaisquer caracteres não-espaço nessa lacuna — seja texto, elementos HTML, etiquetas de script ou até pontuação perdida — são considerados fora do corpo do documento e desencadeiam este erro de validação.

Por que isto é importante

Conformidade com padrões: O padrão HTML atual (WHATWG) é claro que conteúdo após </body> não é válido. A validação W3C sinalizará isto como um erro.
Renderização imprevisível: Os navegadores usam recuperação de erros para lidar com conteúdo mal colocado, e diferentes navegadores podem lidar com isso de forma diferente. A maioria reabrirá implicitamente o <body> e moverá o conteúdo para dentro dele, mas confiar neste comportamento é frágil e imprevisível.
Acessibilidade: Leitores de ecrã e tecnologias assistivas analisam a estrutura DOM. Conteúdo que acaba em lugares inesperados devido à recuperação de erros pode ser anunciado fora de ordem ou completamente perdido.
Manutenibilidade: Conteúdo perdido após </body> é frequentemente um sinal de um problema de organização de código — uma inclusão mal colocada, um problema de renderização de template ou uma colagem acidental — e limpá-lo melhora a manutenibilidade a longo prazo.

Causas comuns

Texto acidental ou erros de digitação após a etiqueta de fecho </body>.
Etiquetas de script ou analytics erradamente colocadas entre </body> e </html> em vez de no final do <body>.
Motores de template do lado do servidor anexando conteúdo após o body num ficheiro de layout.
Comentários ou saída de depuração deixados para trás após </body>.

Exemplos

Texto perdido após `</body>`

Isto desencadeia o erro de validação porque o texto isto é inválido aparece após </body>:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Example</title>
  </head>
  <body>
    <p>Content goes here.</p>
  </body> this is invalid
</html>

Mova todo o conteúdo para dentro do <body>:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Example</title>
  </head>
  <body>
    <p>Content goes here.</p>
  </body>
</html>

Script colocado fora do body

Um erro comum é colocar uma etiqueta <script> entre </body> e </html>:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Example</title>
  </head>
  <body>
    <p>Main content</p>
  </body>
  <script src="analytics.js"></script>
</html>

Coloque o script no final do <body> em vez disso:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Example</title>
  </head>
  <body>
    <p>Main content</p>
    <script src="analytics.js"></script>
  </body>
</html>

Elemento HTML perdido após `</body>`

Às vezes um elemento como um <div> acaba após o body devido a um problema de template:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Example</title>
  </head>
  <body>
    <main>Page content</main>
  </body>
  <div id="overlay"></div>
</html>

Mova-o para dentro do <body>:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Example</title>
  </head>
  <body>
    <main>Page content</main>
    <div id="overlay"></div>
  </body>
</html>

A correção é sempre a mesma: garanta que tudo entre </body> e </html> são espaços em branco ou nada de todo. Todo o conteúdo — texto, elementos, scripts e comentários — pertence dentro do elemento <body>.