Resolvendo: HTML não exibe os caracteres corretamente

Neste artigo vamos resolver um problema clássico: quando o HTML não exibe os caracteres corretamente, isso incomoda muita gente e tem uma solução muito fácil!

Fala programador, beleza? Bora aprender coisa nova!

O problema ocorre pois alguns caracteres aparecem bugados para o usuário e isso é uma grande dor de cabeça para os programadores

Mas para a nossa sorte, tem uma solução muito fácil

E conseguimos normalizar os caracteres com uma meta tag, mudando o encode do documento para que aceite os caracteres da nossa língua

E o nome dessa meta tag é charset, que é colocada no head do HTML

As vezes os programadores não estão habituados a resolver isso pois precisamos colocar apenas uma vez a cada projeto

Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.

HTML não exibe os caracteres corretamente: prática

Bom, vamos simular uma estrutura padrão de HTML e alguns textos para podermos posteriormente resolver o problema

Veja o seguinte HTML:

<!DOCTYPE html>
<html>
<head>
    <title>HTML não exibe os caracteres corretamente</title>
</head>
<body>
    <h1>Qual é o problema?</h1>
    <p>O problema é que nós temos de levantar cedo para trabalhar. Já as crianças não, elas têm o dia todo livre para brincar.</p>
</body>
</html>

E aqui o que ele representa no navegador:

Obs: não liga pra esse texto da imagem, as vezes eu não tenho muita criatividade 😛

Isso acontece porque o encode está incorreto, então devemos adicionar a meta tag charset com o valor de UTF-8 ao head

Veja como fica:

<!DOCTYPE html>
<html>
<head>
    <title>HTML não exibe os caracteres corretamente</title>
    <meta charset="UTF-8"> 
</head>
<body>
    <h1>Qual é o problema?</h1>
    <p>O problema é que nós temos de levantar cedo para trabalhar. Já as crianças não, elas têm o dia todo livre para brincar.</p>
</body>
</html>

E agora o problema é resolvido: