Verificação HTML: Elemento "meta" entre "head" e "body".

Sobre este problema HTML

De acordo com a especificação HTML, os elementos <meta> são conteúdo de metadados e devem aparecer dentro do elemento <head>. Quando uma tag <meta> aparece entre </head> e <body>, os navegadores têm de corrigir o erro ignorando o elemento ou relocalizando-o silenciosamente na head. Isto pode levar a comportamentos imprevisíveis — por exemplo, uma tag <meta charset="utf-8"> na posição errada pode não ser processada a tempo, causando problemas de codificação de caracteres. Da mesma forma, um <meta name="viewport"> mal posicionado pode falhar ao aplicar em alguns navegadores, quebrando o seu layout responsivo.

Existem várias causas comuns para este erro:

Uma tag <meta> acidentalmente colocada após </head> — talvez adicionada apressadamente ou através de um erro de copiar-colar.
Uma secção <head> duplicada — se um segundo bloco <head> aparecer no documento, o navegador fecha o primeiro implicitamente, deixando elementos <meta> órfãos em limbo.
Um elemento não fechado dentro de <head> — uma tag como um <link> ou <script> não fechado pode confundir o analisador, fazendo com que feche implicitamente </head> mais cedo do que esperado, o que empurra as tags <meta> subsequentes para fora da head.
Injeção de template ou CMS — sistemas de gestão de conteúdo ou motores de templates por vezes injetam tags <meta> em posições incorretas no documento.

Para corrigir o problema, inspecione o seu código HTML e garanta que cada elemento <meta> está dentro de uma única secção <head> corretamente estruturada. Verifique também que nenhum elemento dentro de <head> está não fechado ou malformado, pois isto pode fazer com que o analisador termine a secção head prematuramente.

Exemplos

Incorreto — `<meta>` entre `</head>` e `<body>`

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Page</title>
    <meta charset="utf-8">
  </head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <body>
    <p>Hello, world!</p>
  </body>
</html>

A tag <meta name="viewport"> está fora de <head>, desencadeando o erro de validação.

Incorreto — secções `<head>` duplicadas

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Page</title>
    <meta charset="utf-8">
  </head>
  <head>
    <meta name="description" content="A sample page">
  </head>
  <body>
    <p>Hello, world!</p>
  </body>
</html>

O segundo bloco <head> é inválido. O navegador ignora-o, deixando o elemento <meta name="description"> encalhado entre </head> e <body>.

Incorreto — elemento não fechado força fecho antecipado da head

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Page</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <div>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <p>Hello, world!</p>
  </body>
</html>

O <div> não é válido dentro de <head>, por isso o analisador fecha implicitamente a secção head quando o encontra. A tag <meta> subsequente acaba fora de <head>.

Correto — todos os elementos `<meta>` dentro de `<head>`

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A sample page">
    <title>My Page</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <p>Hello, world!</p>
  </body>
</html>

Todos os elementos <meta> estão corretamente contidos numa única secção <head>. Note que <meta charset="utf-8"> deve idealmente ser o primeiro elemento em <head> para que o navegador conheça a codificação antes de processar qualquer outro conteúdo.