Verificação HTML: Um atributo "charset" num elemento "meta" encontrado após os primeiros 1024 bytes.

Sobre este problema HTML

Uma declaração de codificação de caracteres diz ao navegador como interpretar os bytes brutos do seu documento em caracteres legíveis. Para documentos HTML, a forma padrão de declarar isto é com <meta charset="utf-8">. A especificação HTML requer que este elemento seja serializado completamente dentro dos primeiros 1024 bytes do documento. Isto significa que tudo desde o início do ficheiro—incluindo o doctype, a tag <html>, a tag <head> e o próprio elemento <meta charset>—deve caber dentro dessa janela de 1024 bytes.

Se o elemento <meta charset> aparecer após os primeiros 1024 bytes, o navegador deve usar outras heurísticas ou codificações de recurso para adivinhar como descodificar o documento. Isto pode causar vários problemas:

Texto corrompido ou quebrado: Caracteres fora da gama ASCII (como letras acentuadas, caracteres CJK ou emojis) podem renderizar incorretamente.
Vulnerabilidades de segurança: Certos comportamentos de deteção de codificação foram historicamente explorados para ataques de cross-site scripting (XSS), que é uma razão pela qual a especificação impõe este limite rigoroso.
Renderização inconsistente: Diferentes navegadores podem recorrer a diferentes codificações padrão, o que significa que a sua página pode parecer diferente dependendo do navegador do utilizador ou da configuração regional do sistema.

Este problema ocorre tipicamente quando um grande número de tags <meta>, blocos <style> inline, comentários extensos ou elementos <script> são colocados no <head> antes da declaração <meta charset>. Até espaços em branco excessivos ou conteúdo injetado pelo servidor podem empurrá-lo para além da fronteira dos 1024 bytes.

Para corrigir isto, certifique-se de que <meta charset="utf-8"> é o primeiro elemento filho de <head>, aparecendo antes de qualquer tag <title>, <link>, <script>, <style> ou outras tags <meta>. Remova ou mova qualquer conteúdo desnecessário que o preceda.

Exemplos

❌ Incorreto: `<meta charset>` empurrado para além dos 1024 bytes

Neste exemplo, um grande bloco de estilo inline e várias meta tags aparecem antes da declaração charset, facilmente excedendo o limite de 1024 bytes:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="description" content="A very long description...">
    <meta name="keywords" content="many, keywords, here, ...">
    <meta name="author" content="Some Author">
    <link rel="stylesheet" href="styles.css">
    <style>
      /* Hundreds of bytes of inline CSS rules...
         ...pushing the total well past 1024 bytes
         before the charset declaration appears */
      body { font-family: sans-serif; margin: 0; padding: 0; }
      .container { max-width: 1200px; margin: 0 auto; }
      /* ...many more rules... */
    </style>
    <meta charset="utf-8">
    <title>My Page</title>
  </head>
  <body>
    <p>Hello world</p>
  </body>
</html>

✅ Correto: `<meta charset>` como primeiro elemento no `<head>`

Mova a declaração charset para a primeira posição dentro do <head>:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My Page</title>
    <meta name="description" content="A very long description...">
    <meta name="keywords" content="many, keywords, here, ...">
    <meta name="author" content="Some Author">
    <link rel="stylesheet" href="styles.css">
    <style>
      body { font-family: sans-serif; margin: 0; padding: 0; }
      .container { max-width: 1200px; margin: 0 auto; }
    </style>
  </head>
  <body>
    <p>Hello world</p>
  </body>
</html>

✅ Exemplo correto mínimo

Para documentos mais simples, o padrão é direto—apenas mantenha <meta charset> primeiro:

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

Como regra geral, torne sempre <meta charset="utf-8"> a primeira coisa após a tag de abertura <head>. Isto garante que fica bem dentro do limite de 1024 bytes independentemente do que se segue, e garante que o navegador conhece a codificação correta antes de encontrar qualquer outro conteúdo.