Como Corrigir Caracteres Estranhos e Acentos no HTML (A Tag Meta Charset UTF-8)

<< Aula Anterior Sumário do Curso Próxima Aula >>

Tente criar um arquivo simples em HTML no seu computador e coloque os seguintes textos na tela:

"HTML Progressivo é uma apostila online."
"Os cursos da rede Progressivo são muito bons."
"Estou estudando com eficiência."

Ao abrir isso no navegador... você verá algumas coisas bizarras. Uns símbolos malucos e sem nenhum sentido engolindo as suas vogais.

Neste artigo do nosso Curso completo de HTML, iremos mergulhar nas entranhas dos navegadores para explicar o real motivo disso ocorrer. Mais do que isso: você vai aprender de uma vez por todas como escrever corretamente em HTML, dominando as entidades HTML e a famosa (e salvadora) meta tag charset.

A Treta da Acentuação Errada em HTML

Resposta Direta: Para corrigir acentos e caracteres estranhos no HTML, você deve definir a codificação do documento usando a tag <meta charset="utf-8"> dentro da seção <head>. Isso garante que o navegador interprete corretamente símbolos latinos, acentos e alfabetos do mundo todo.

Vamos testar o que pedimos no início desta aula. Crie um arquivo HTML básico e exiba aquelas frases. É importante que você sempre digite os exemplos do nosso curso na mão. Nada de Ctrl+C e Ctrl+V, beleza? Memória muscular é o segredo de um Front-End de sucesso.

Seu código (sem otimização) provavelmente ficou assim:

<!DOCTYPE html>
<html lang="pt-br">
 <head>
    <title>Acentos ortográficos em HTML</title>
 </head>
 
 <body>
  "HTML Progressivo é uma apostila online." <br>
  "Os cursos da rede Progressivo são muito bons."<br>
  "Estou estudando com eficiência."
 </body>
</html>

E o resultado renderizado na tela do seu navegador pode ser este desastre visual:

  "HTML Progressivo Ã© uma apostila online."

  "Os cursos da rede Progressivo sÃ£o muito bons."

  "Estou estudando com eficiÃªncia."

Em vez de 'é', aparece Ã©.
Em vez de 'são', aparece sÃ£o.
Em vez de 'eficiência', apareceu eficiÃªncia.

Bizarro, não é? Mas calma. No mundo da programação, tudo tem um sentido. E a razão aqui é histórica.

Por que os Navegadores "Quebram" os Acentos?

Você já parou para pensar que a linguagem dos computadores (e a própria web) foi criada em países de língua inglesa? Nos Estados Unidos, não se usa acento agudo, til (~), circunflexo (^), crase (`) ou a nossa querida cedilha (ç).

Quando a web nasceu, o padrão de leitura de texto era baseado no alfabeto americano (uma tabela chamada ASCII). Mas e quando o Brasil entrou na jogada? E os japoneses com seus kanjis? E o alfabeto árabe?

🛠️ Curiosidade Nerd: O HTML é uma linguagem que evolui. Para abraçar o mundo inteiro, ele precisou se adaptar. O navegador não adivinha a sua língua. Se você não disser a ele "Ei, eu estou usando acentos latinos!", ele vai tentar ler o seu "é" usando o dicionário americano, o que resulta naqueles símbolos bizarros (o famoso Mojibake).

Para resolver isso, historicamente, tínhamos duas opções: usar Códigos Especiais (Entidades HTML) ou, a mais moderna, declarar a Meta Tag Charset. Vamos entender as duas, pois um desenvolvedor sênior precisa conhecer o passado para dominar o futuro.

Pare de Sofrer com Códigos Quebrados!

"Eu vivia travado tentando entender porque meu layout quebrava no celular, essa apostila salvou meus projetos e minha sanidade!" — Carlos, Desenvolvedor Front-End.

Domine o HTML e o CSS no seu ritmo, sem depender da internet. Leve todo o nosso conhecimento com você!

Baixar a Apostila Digital (PDF) Agora!
Prefere sentir o cheiro do papel? Compre o Livro Físico aqui.

Método 1 (O Antigo): Códigos Especiais (Entidades HTML)

A primeira maneira de exibir acentos em HTML é através de Entidades HTML. Antigamente, os desenvolvedores precisavam substituir cada letra acentuada por um código específico.

Vamos para uma rápida aula de inglês, pois isso facilita a decoreba:

Agudo (acento agudo) em inglês é acute.
Til (~) em inglês é tilde.
Circunflexo (^) é circumflex (abreviado para circ).
Cedilha (ç) é cedil.

Para colocar o acento agudo na letra 'e', usamos a letra + a palavra em inglês dentro de um código que começa com & e termina com ;. Ficando assim: é

Para a letra 'a' com til: ã
Para o 'e' com circunflexo: ê
Para o c-cedilha: ç

Ou seja, a palavra "são" virava "são" na mão do programador. Olha o trabalho que isso dava no passado:

<body>
  "HTML Progressivo &eacute; uma apostila online." <br>
  "Os cursos da rede Progressivo s&atilde;o muito bons."<br>
  "Estou estudando com efici&ecirc;ncia."
</body>

⚠️ Atenção: Hoje em dia, ninguém em sã consciência digita textos inteiros usando essas entidades. Ferramentas modernas e CMS (como o WordPress ou o próprio Blogger) fazem essa conversão por baixo dos panos, ou melhor ainda, utilizam o Charset UTF-8, que vamos ver agora!

Método 2 (O Moderno): A Meta Tag Charset UTF-8

A salvação da pátria! Em vez de traduzir letra por letra, nós usamos a tag <meta charset="utf-8">. Ela funciona como um "tradutor universal".

Ao colocar essa linha no <head> do seu código, seu site avisa o navegador: "Ei Chrome, Firefox, Safari! Estou usando a codificação UTF-8 (Unicode), então fique à vontade para renderizar acentos latinos, kanjis japoneses e até emojis! 🚀"

A sintaxe antigamente, no HTML4, era um verdadeiro palavrão:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Mas, graças aos deuses da web, no HTML5, isso foi simplificado para apenas:

<!DOCTYPE html>
<html lang="pt-br">
 <head>
    <meta charset="utf-8">  <!-- A MAGIA ACONTECE AQUI -->
    <title>Usando charset utf-8 em HTML</title>
 </head>
 
 <body>
  "HTML Progressivo é uma apostila online." <br>
  "Os cursos da rede Progressivo são muito bons."<br>
  "Estou estudando com eficiência."
 </body>
</html>

Resultado Prático!

Se você salvar o código acima e abrir no navegador, o resultado será lindamente formatado, sem nenhum erro ou mojibake:

"HTML Progressivo é uma apostila online."
"Os cursos da rede Progressivo são muito bons."
"Estou estudando com eficiência."

💡 Dica de Ouro SEO: Sempre coloque a tag <meta charset="utf-8"> como a PRIMEIRA coisa dentro do seu <head>. Isso garante que o navegador leia a codificação antes de ler o título da página ou qualquer outro script, evitando falhas de segurança e melhorando a velocidade de renderização.

O que significa Charset UTF-8?

Charset significa "Character Set" (Conjunto de Caracteres). UTF-8 é um padrão de codificação que inclui praticamente todos os caracteres e símbolos do mundo, desde alfabetos ocidentais e orientais até os emojis do seu celular. Usar o UTF-8 garante que seu texto seja legível globalmente.

Ainda preciso usar entidades HTML (Códigos Especiais)?

Para acentuação comum de textos (como á, é, í, õ, ç), não é mais necessário se você estiver usando a tag charset utf-8. Porém, você ainda precisará das Entidades HTML para exibir símbolos reservados da própria linguagem, como os sinais de Maior > e Menor <, ou um espaço extra  .

O Que Estudar a Seguir?

Seu aprendizado não para por aqui. Agora que o seu site consegue conversar no seu idioma, vamos expandir as funcionalidades dele. Recomendamos fortemente as seguintes leituras:

Como Estruturar um Site com Semântica: A diferença entre divs genéricas e as novas tags do HTML5 (header, footer, article).
Aprenda a Inserir Imagens: Descubra como usar a tag <img> corretamente sem destruir seu Core Web Vitals.
Formulários no HTML: Como criar caixas de texto perfeitas para os seus usuários.

(E se o seu lance for programação Backend no futuro, lembre-se que temos um Curso Completo de PHP estruturado nos mesmos moldes didáticos do HTML Progressivo!)

Para consultas técnicas adicionais sobre entidades de caracteres, confira sempre a documentação oficial da MDN Web Docs, que é a verdadeira bíblia do desenvolvedor moderno.