Verificação HTML: Tag de abertura `<head>` perdida.

Sobre este problema HTML

O elemento <head> é o contentor para metadados do documento — coisas como o <title>, tags <meta>, elementos <link>, e referências <script>. De acordo com a especificação HTML, o <head> deve ser o primeiro elemento filho de <html> e deve aparecer exatamente uma vez. Quando o parser do navegador encontra uma segunda tag <head>, ou uma tag <head> após o <body> já ter sido aberto, trata-a como uma tag de abertura “perdida” porque viola a estrutura esperada do documento.

Este problema surge comumente em várias situações:

Secções <head> duplicadas — frequentemente causadas por erros de copiar-colar, inclusões de template, ou renderização do lado do servidor que injeta um segundo bloco <head>.
<head> colocado dentro de <body> — isto pode acontecer ao reestruturar uma página ou quando um componente ou template parcial inclui incorretamente o seu próprio <head>.
Tags de fecho em falta ou mal colocadas — se se esquecer de fechar o <head> com </head> ou fechar acidentalmente <html> cedo demais, tags subsequentes podem acabar em posições inesperadas.

Isto importa porque os navegadores lidam com tags <head> perdidas de forma inconsistente. A maioria dos navegadores modernos irá ignorar silenciosamente um segundo <head> e tentar processar os seus filhos como se fossem parte do <body>, o que significa que os seus metadados (como declarações <meta> charset, folhas de estilo, ou scripts) podem não ser reconhecidos adequadamente. Isto pode levar a styling quebrado, problemas de codificação, metadados SEO em falta, e comportamento imprevisível entre diferentes navegadores.

Exemplos

Secções `<head>` duplicadas

Um erro comum é ter dois blocos <head> no mesmo documento:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Page</title>
  </head>
  <head>
    <meta name="description" content="My description">
  </head>
  <body>
    <p>Hello world</p>
  </body>
</html>

O segundo <head> desencadeia o erro de tag de abertura perdida. Una tudo num único <head>:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Page</title>
    <meta name="description" content="My description">
  </head>
  <body>
    <p>Hello world</p>
  </body>
</html>

`<head>` colocado dentro de `<body>`

Isto acontece frequentemente quando um template parcial ou componente inclui o seu próprio <head>:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Page</title>
  </head>
  <body>
    <head>
      <link rel="stylesheet" href="extra.css">
    </head>
    <p>Hello world</p>
  </body>
</html>

Mova os metadados para a secção <head> existente:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Page</title>
    <link rel="stylesheet" href="extra.css">
  </head>
  <body>
    <p>Hello world</p>
  </body>
</html>

`<head>` aparecendo após `<body>`

Por vezes um <head> acaba após a tag de fecho </body>, particularmente em páginas montadas dinamicamente:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Page</title>
  </head>
  <body>
    <p>Hello world</p>
  </body>
  <head>
    <meta charset="utf-8">
  </head>
</html>

Novamente, a correção é consolidar tudo no único <head> corretamente colocado:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My Page</title>
  </head>
  <body>
    <p>Hello world</p>
  </body>
</html>

Dica para sistemas baseados em templates

Se você usa um motor de templates, gerador de sites estáticos, ou CMS, verifique que apenas o seu layout base define o elemento <head>. Parciais e componentes devem injetar conteúdo no <head> existente usando o mecanismo de bloco ou slot do sistema de templates, em vez de envolver os seus metadados numa nova tag <head>. Procure no output HTML final renderizado por todas as ocorrências de <head para verificar que existe apenas uma.