Charset HTML

Os links de favicon dizem ao navegador qual imagem pequena mostrar na aba. O charset responde a uma pergunta mais fundamental: como o navegador deve transformar os bytes do seu arquivo HTML em letras que humanos leem? Quando a codificação está errada, persa, árabe, latim acentuado, chinês e emoji costumam virar mojibake — sequências ilegíveis que parecem quebradas mesmo com o restante da marcação correta.

O que charset significa

Um conjunto de caracteres (e sua codificação) mapeia bytes no disco para caracteres. Arquivos HTML são fluxos de bytes. Sem uma regra de decodificação correta, o navegador pode adivinhar errado. Declarar UTF-8 em head é o hábito moderno da web que mantém texto multilíngue e símbolos confiáveis entre editores, servidores e navegadores.

Resposta direta

Coloque <meta charset="UTF-8"> perto do topo de head — de preferência nos primeiros 1024 bytes do arquivo para o navegador aprender a codificação cedo. UTF-8 é a codificação que você deve usar em quase todas as páginas novas. Salve também o próprio arquivo HTML como UTF-8 no editor. Declaração e salvamento do arquivo precisam coincidir; um sem o outro ainda produz caracteres quebrados.

Declarar, salvar e idioma — trabalhos diferentes

Uma demo UTF-8 multilíngue

Um documento curto mostra charset em ação. A meta vem primeiro em head, depois um título, depois texto no body que mistura escritas.

Lendo o exemplo

• <meta charset="UTF-8"> fica cedo em head, antes da maior parte do restante do conteúdo
• lang="en" nomeia um idioma principal para ferramentas; não substitui charset
• O parágrafo inclui latim, persa, árabe, chinês e um emoji — tudo bem sob UTF-8 quando o arquivo é salvo corretamente
• Se esses caracteres quebrarem, verifique a codificação ao salvar antes de reescrever a estrutura HTML

Por que colocar charset cedo

Os navegadores começam a ler o arquivo do topo. Se charset só aparecer depois de um bloco enorme de texto ou scripts, alguns caracteres já podem ter sido interpretados com um palpite errado. Mantenha a meta perto da abertura de head. Nos head iniciais das sessões anteriores, charset ficou intencionalmente em primeiro por esse motivo.

Mojibake: o sintoma de desalinhamento

Mojibake parece pontuação aleatória, restos latinos ou caracteres de substituição onde deveriam aparecer palavras reais. Causas comuns: declarar UTF-8 enquanto o arquivo foi salvo em uma codificação legada, ou omitir charset e esperar que o navegador adivinhe certo. Corrija o par de codificação — meta mais salvamento do arquivo — em vez de “consertar” letras digitando de novo para sempre.

lang não é charset

O atributo lang em html (e às vezes em elementos específicos) ajuda leitores de tela, hifenização e ferramentas de busca a entender o idioma. Charset cuida da decodificação de bytes. Em geral você quer os dois: lang para identidade de idioma, charset para codificação. Não remova charset só porque já definiu lang="fa" ou lang="ar".

Servidores e implantações reais (nota para iniciantes)

Servidores de produção também podem enviar um charset Content-Type nos cabeçalhos HTTP. Neste curso, primeiro domine a meta HTML e o hábito de salvar em UTF-8. Quando um site ao vivo discordar da sua meta, peça a um mentor para checar os cabeçalhos — mas a maioria dos problemas na prática local é codificação ao salvar no editor ou uma meta ausente.

Pratique no seu editor

1. Crie uma página com <meta charset="UTF-8"> no topo de head.
2. Adicione uma frase com letras não inglesas e um emoji.
3. Confirme que a barra de status do editor diz UTF-8 e salve.
4. Abra a página no navegador e confirme que os caracteres aparecem corretos.
5. (Opcional, com cuidado) Salve uma cópia em uma codificação legada, reabra e observe o mojibake — depois restaure UTF-8 para reconhecer esse modo de falha.

Erros fáceis

• Esquecer meta charset e confiar na sorte do navegador
• Salvar o arquivo em codificação legada enquanto declara UTF-8
• Colocar charset meta muito tarde num head enorme
• Confundir charset com o título visível da página ou com lang
• Assumir que problemas de emoji são sempre “bugs de HTML” quando a codificação é a causa real
• “Consertar” mojibake apagando lang em vez de corrigir salvamento UTF-8 + meta

Resumo

• Charset declara como decodificar os bytes do arquivo HTML em caracteres
• Use UTF-8 em quase todas as páginas novas e coloque meta charset cedo em head
• Salve o arquivo como UTF-8 para declaração e codificação no disco coincidirem
• lang nomeia o idioma; charset nomeia a codificação — trabalhos diferentes
• Mojibake costuma significar desalinhamento de codificação, não uma falha misteriosa de tag