Verificação HTML: Atributo "charset" não permitido no elemento "meta" neste ponto.

Sobre este problema HTML

A declaração <meta charset="utf-8"> não é apenas válida, mas recomendada pelo padrão HTML living standard. Então quando o validador se queixa de que o atributo charset “não é permitido neste ponto,” o problema não é a própria tag <meta> — é o que a rodeia. O parser HTML segue regras rígidas sobre quais elementos podem aparecer dentro de <head>. Quando encontra um elemento que não pertence ali (como <img>, <div>, <p>, ou outro conteúdo de flow/phrasing), fecha implicitamente o <head> e abre o <body>. Quaisquer tags <meta> que venham depois desse ponto são agora parseadas como estando dentro de <body>, onde <meta charset> não é permitido.

Isto é um problema por várias razões. Primeiro, a declaração <meta charset> deve aparecer dentro dos primeiros 1024 bytes do documento para que os browsers possam determinar a codificação de caracteres cedo. Se o parser a mover para fora do <head>, os browsers podem não aplicar a codificação corretamente, potencialmente levando a texto distorcido — especialmente para caracteres não-ASCII. Segundo, isto frequentemente sinaliza um erro estrutural no seu HTML que pode causar outros problemas de renderização inesperados.

Causas comuns incluem:

Um elemento que só pertence ao <body> (como <img>, <div>, <span>, ou <p>) colocado antes do <meta charset> no <head>.
Uma tag de fecho perdida (como </head>) a aparecer demasiado cedo.
Uma tag <script> com conteúdo que faz o parser sair do <head>.

Para resolver o problema, inspecione os elementos que aparecem antes do <meta charset> no seu <head>. Mova quaisquer elementos que não pertencem ao <head> para o <body>, e coloque <meta charset="utf-8"> como o primeiro elemento dentro do <head>.

Exemplos

Incorreto — elemento antes do `<meta>` força parser para fora do `<head>`

Uma tag <img> dentro do <head> faz o parser fechar implicitamente o <head> e abrir o <body>. O <meta charset> que se segue é agora parseado como estando no <body>, desencadeando o erro.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Page</title>
    <img src="photo.jpg" alt="A smiling cat">
    <meta charset="utf-8">
  </head>
  <body>
    <p>Some content</p>
  </body>
</html>

Correto — `<meta charset>` primeiro, elementos inválidos movidos para `<body>`

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My Page</title>
  </head>
  <body>
    <img src="photo.jpg" alt="A smiling cat">
    <p>Some content</p>
  </body>
</html>

Incorreto — `<div>` perdido no `<head>` quebra o contexto

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

Correto — apenas elementos de head válidos antes do `<meta charset>`

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

Melhor prática

Como regra geral, faça sempre do <meta charset="utf-8"> o primeiro filho do <head>. Isto garante que o browser deteta a codificação o mais cedo possível e evita o risco de outros elementos acidentalmente quebrarem o contexto do parser antes da declaração do charset.