charset e tratamento de Unicode: caracteres especiais
Use UTF-8 e entidades HTML para exibir qualquer caractere corretamente.
charset e tratamento de Unicode: caracteres especiais é uma aula grátis de HTML Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de HTML Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML Academy inclui 4 aulas no total.
A declaração de charset
Todo documento HTML deve declarar sua codificação de caracteres. O padrão é UTF-8: <meta charset="utf-8"> como o primeiro elemento de <head>. Sem isso, o navegador tenta adivinhar, o que frequentemente dá errado com texto não ASCII.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Page</title>Por que UTF-8?
UTF-8 codifica todos os caracteres Unicode: todos os sistemas de escrita, todos os emojis e todos os símbolos. É compatível com ASCII (a-z e 0-9 continuam ocupando um único byte) e é a codificação predominante na internet moderna — mais de 98% das páginas em 2024 usam UTF-8.
A posição é fundamental
A tag meta charset deve aparecer nos primeiros 1024 bytes do documento — normalmente na primeira linha de <head>. O navegador identifica a codificação por inspeção desses bytes; declarar charset mais tarde pode não afetar o resultado dessa inspeção.
Salve os arquivos em UTF-8
A tag meta declara a codificação; seu editor precisa realmente salvar o arquivo nessa codificação. VS Code, IntelliJ e Sublime usam UTF-8 por padrão nas versões modernas. Arquivos salvos como Windows-1252 ou ISO-8859-1 produzem texto corrompido mesmo com a tag meta correta.
Entidades HTML
Os caracteres especiais do HTML (<, >, &, ") devem ser escapados para evitar confusão do analisador: < para <, > para >, & para & e " para ". Dentro dos valores de atributos, " é obrigatório quando o valor é delimitado por aspas duplas.
Referências numéricas de caracteres
Qualquer caractere Unicode pode ser referenciado pelo seu ponto de código: ☃ ou ☃ para o boneco de neve (☃). Use isso quando for impraticável digitar o caractere diretamente (símbolos raros, caracteres de controle), mas prefira o caractere Unicode literal quando o editor oferecer suporte a ele.
Emojis e pares substitutos
Os emojis são caracteres Unicode acima de U+FFFF e são representados como pares substitutos em UTF-16 (a codificação usada dentro de strings JavaScript). UTF-8 os codifica como sequências de 4 bytes. Com charset="utf-8" definido, os emojis são exibidos nativamente sem entidades.
Erros comuns de codificação
O fato de "Don't" ser exibido como "Donât" significa que o arquivo está sendo interpretado como Latin-1, mas foi salvo como UTF-8. Corrija salvando o arquivo como UTF-8 e verificando se <meta charset="utf-8"> está presente. Os navegadores modernos usam UTF-8 por padrão somente quando a tag meta está ausente AND o arquivo parece plausivelmente estar em UTF-8.
Cabeçalho HTTP Content-Type
O servidor também pode declarar a codificação por meio do cabeçalho da resposta: Content-Type: text/html; charset=utf-8. O cabeçalho tem precedência sobre a tag meta, portanto servidores configurados incorretamente podem causar erros de codificação até mesmo em HTML perfeitamente escrito.
Trabalhando com formulários
Por padrão, os formulários são enviados usando a codificação da página. Páginas UTF-8 enviam dados de formulário em UTF-8, que o servidor deve decodificar como UTF-8. A incompatibilidade entre a codificação da página e a decodificação do servidor é uma fonte comum de entradas de usuário corrompidas em sites multilíngues.
Evite BOM
Arquivos UTF-8 podem começar com uma marca de ordem dos bytes (BOM, 0xEF 0xBB 0xBF). A maioria dos navegadores tolera isso, mas algumas ferramentas e CDNs não — e o BOM aparece como um caractere visível em alguns editores de texto. Salve os arquivos como "UTF-8 sem BOM" para evitar surpresas.
Verificação de conhecimento
Por que precisa aparecer nos primeiros 1024 bytes de um documento HTML?
Resumo
Declare <meta charset="utf-8"> como o primeiro filho de <head> e salve os arquivos em UTF-8. UTF-8 codifica todos os caracteres Unicode (incluindo emojis e todos os sistemas de escrita). Escape <, >, & e " como entidades; use referências numéricas para caracteres raros. Fique atento ao Content-Type HTTP substituir a tag meta e ao BOM aparecer como caractere visível em algumas ferramentas.
Perguntas Frequentes
A aula “charset e tratamento de Unicode: caracteres especiais” é grátis?
Sim — o texto completo de “charset e tratamento de Unicode: caracteres especiais” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de HTML Academy, atualize para CoddyKit PRO. O curso de HTML Academy inclui 4 aulas no total.
O que vou aprender em “charset e tratamento de Unicode: caracteres especiais”?
Use UTF-8 e entidades HTML para exibir qualquer caractere corretamente. Você pratica HTML Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar HTML Academy?
Nenhuma experiência prévia é necessária. HTML Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “charset e tratamento de Unicode: caracteres especiais”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de HTML Academy?
Sim. Cada aula de HTML Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- O atributo lang e os leitores de tela
- dir=rtl para texto da direita para a esquerda
- Os elementos bdi e bdo
- charset e tratamento de Unicode: caracteres especiais