O que é a declaração de charset?
A meta tag de charset informa ao navegador qual codificação de caracteres usar ao renderizar a página. Sem ela, o navegador precisa adivinhar, o que pode gerar texto corrompido, especialmente com caracteres não ASCII.
Por que isso importa?
Problemas de codificação
Sem uma declaração de charset:
- Caracteres acentuados podem virar lixo: “café” → “café”
- Emojis podem não aparecer corretamente
- Alfabetos não latinos (chinês, árabe, japonês, etc.) podem ficar ilegíveis
- Caracteres especiais como travessões, aspas tipográficas e símbolos podem quebrar
Segurança
- Declarações de charset ausentes podem abrir caminho para ataques UTF-7 XSS em navegadores antigos
- A especificação HTML5 exige uma declaração de charset por motivos de segurança
Performance
- Quando o navegador precisa adivinhar a codificação, pode ser necessário re-parsear a página depois de descobri-la
- Isso causa um flash breve ou re-renderização
Como corrigir
Adicione isto como o primeiro elemento dentro do seu <head>:
<meta charset="UTF-8" />Por que UTF-8?
UTF-8 é o padrão universal para conteúdo web:
- Suporta todos os caracteres de todos os idiomas
- É compatível com ASCII
- Usado por mais de 98% dos sites no mundo
- Exigido pela especificação HTML5
- Codificação padrão para JSON, JavaScript e muitas APIs
Boas práticas
- Sempre use UTF-8 — Não há bom motivo para usar outra coisa na web moderna
- Coloque primeiro no
<head>— O navegador precisa saber a codificação antes de parsear o restante do conteúdo - Mantenha nos primeiros 1024 bytes — Exigência da especificação HTML para detecção de encoding
- Alinhe com os headers do servidor — Garanta que o servidor envie
Content-Type: text/html; charset=UTF-8 - Salve os arquivos como UTF-8 — Confira se o editor e as ferramentas de build geram arquivos em UTF-8
A sintaxe alternativa
Você também pode ver esta sintaxe mais antiga e equivalente:
<!-- HTML5 (recommended) -->
<meta charset="UTF-8" />
<!-- HTML4/XHTML (older, still works) -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />A sintaxe HTML5 (<meta charset="UTF-8" />) é preferida por ser mais simples.