Verificação HTML: Tag de início de `script` isolado.

Sobre este problema HTML

Num documento HTML válido, todo o conteúdo deve residir dentro do elemento <html>, e especificamente dentro de <head> ou <body>. O analisador HTML espera uma estrutura bem definida: <!DOCTYPE html>, depois <html>, contendo <head> e <body>. Quando um tag <script> aparece fora desta hierarquia — por exemplo, após o tag de fecho </html> — o validador reporta-o como um “tag de início isolado” porque não tem um pai válido na árvore do documento.

Este é um problema comum que surge de várias formas. Por vezes, os programadores colocam acidentalmente um script após </body> ou </html>, pensando que ainda será executado. Outras vezes, sistemas de templates ou plataformas CMS injetam scripts no final da saída sem garantir que estão dentro de <body>. Embora os browsers sejam tolerantes e tipicamente ainda executem o script, depender deste comportamento de recuperação de erros leva a marcação não padrão e posicionamento DOM imprevisível.

Por que isto é importante

Conformidade com padrões: A especificação HTML requer que todos os elementos estejam devidamente aninhados dentro da estrutura do documento. Um <script> fora de <html> viola este requisito.
DOM previsível: Quando um browser encontra um <script> isolado, deve usar recuperação de erro para determinar onde o colocar no DOM. Diferentes browsers podem lidar com isto de forma diferente, levando a inconsistências.
Manutenibilidade: Marcação inválida pode causar cenários de depuração confusos, especialmente quando JavaScript depende da estrutura ou ordenação do DOM.

Como corrigir

Mova o elemento <script> para dentro de <head> ou <body>:

Coloque-o em <head> se o script precisar de carregar antes do conteúdo da página renderizar (configuração, configuração de analytics, etc.). Considere usar o atributo defer ou async para scripts externos para evitar bloquear a renderização.
Coloque-o no final de <body> (logo antes de </body>) se o script interage com elementos DOM, que é um padrão comum e recomendado.

Exemplos

Incorreto: script após o tag de fecho `</html>`

Isto desencadeia o erro “Tag de início de script isolado” porque o <script> está fora da estrutura do documento inteiramente.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Page</title>
  </head>
  <body>
    <p>Hello world</p>
  </body>
</html>
<script>
  console.log("This is stray!");
</script>

Incorreto: script entre `</head>` e `<body>`

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Page</title>
  </head>
  <script>
    console.log("Misplaced script");
  </script>
  <body>
    <p>Hello world</p>
  </body>
</html>

Correto: script no `<head>`

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Page</title>
    <script>
      console.log("Hello from the head");
    </script>
  </head>
  <body>
    <p>Hello world</p>
  </body>
</html>

Correto: script no final de `<body>`

Este é o posicionamento mais comum e recomendado para scripts que interagem com a página.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Page</title>
  </head>
  <body>
    <p>Hello world</p>
    <script>
      console.log("Hello from the body");
    </script>
  </body>
</html>

Correto: script externo com `defer` em `<head>`

Usar defer permite colocar o script em <head> enquanto garante que executa após o DOM ser totalmente analisado, dando-lhe o melhor dos dois mundos.

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