Usar caracteres especiais e acentos no HTML é uma parte importante para criar páginas bem escritas, legíveis e sem erros estranhos no navegador. Quem está começando a estudar HTML geralmente se depara com um problema comum: letras acentuadas aparecem quebradas, símbolos somem, aspas ficam diferentes ou caracteres como “ç”, “ã”, “é” e “ô” aparecem como códigos esquisitos.
Isso acontece porque o HTML precisa interpretar corretamente o texto da página. Quando a codificação não está bem definida, o navegador pode não entender alguns caracteres e mostrar símbolos incorretos. Por isso, aprender como usar acentos, entidades HTML e caracteres especiais é essencial para qualquer pessoa que cria sites, blogs, landing pages, lojas virtuais ou sistemas web.
O que são caracteres especiais no HTML?
Caracteres especiais no HTML são símbolos que podem ter uma função específica dentro do código ou que não são digitados facilmente pelo teclado comum. Alguns deles são usados pelo próprio HTML para marcar tags e estruturas.
Exemplos comuns:
- <
- >
- &
- “
- ‘
- ©
- ®
- €
- °
- ª
- º
- ç
- á
- é
- ã
- õ
O problema é que alguns símbolos podem confundir o navegador. Por exemplo, o sinal de menor que < é usado para abrir uma tag HTML. Então, se você quiser mostrar esse símbolo como texto dentro da página, precisa usar uma entidade HTML.
Por que os acentos podem dar erro no HTML?
Os acentos podem aparecer errados quando o documento HTML não informa corretamente qual codificação de caracteres está sendo usada. A codificação mais recomendada hoje é a UTF-8, pois ela aceita letras acentuadas, símbolos, caracteres de vários idiomas e muitos sinais especiais.
Para evitar problemas, coloque esta linha dentro da tag <head> do seu HTML:
<meta charset=”UTF-8″>
Exemplo completo:
<!DOCTYPE html>
<html lang=”pt-BR”>
<head>
<meta charset=”UTF-8″>
<title>Minha página com acentos</title>
</head>
<body>
<h1>Olá, você está aprendendo HTML!</h1>
<p>Esse texto tem acentos, cedilha e caracteres especiais.</p>
</body>
</html>
Com isso, palavras como ação, coração, página, você, informação e código tendem a aparecer corretamente no navegador.
Como usar acentos diretamente no HTML
A forma mais simples de usar acentos no HTML é escrever normalmente, desde que o arquivo esteja salvo em UTF-8 e tenha a meta tag correta.
Você pode escrever assim:
<p>João está criando uma página sobre programação.</p>
<p>A informação foi atualizada com sucesso.</p>
<p>Você pode usar acentos sem problema.</p>
Essa é a maneira mais prática e usada atualmente. Não é obrigatório transformar cada letra acentuada em código especial se o HTML estiver configurado corretamente.
Palavras comuns que podem ser escritas direto:
- Café
- Ação
- Maçã
- Coração
- Informações
- Você
- Português
- Programação
- Número
- Usuário
O que são entidades HTML?
As entidades HTML são códigos usados para representar caracteres especiais. Elas geralmente começam com & e terminam com ;.
Por exemplo:
©
Esse código mostra o símbolo:
©
As entidades são úteis quando você precisa exibir símbolos reservados do HTML ou garantir que determinado caractere apareça corretamente em diferentes contextos.
Principais entidades HTML para acentos
Mesmo que hoje seja mais comum usar UTF-8, ainda é bom conhecer as entidades HTML de letras acentuadas. Elas aparecem bastante em códigos antigos, sistemas legados e alguns editores.
Exemplos:
á = á
é = é
í = í
ó = ó
ú = ú
à = à
ã = ã
õ = õ
â = â
ê = ê
ô = ô
ç = ç
Com letras maiúsculas:
Á = Á
É = É
Í = Í
Ó = Ó
Ú = Ú
à = Ã
Õ = Õ
Ç = Ç
Exemplo dentro de uma frase:
<p>Você está aprendendo HTML com acentuação.</p>
No navegador, aparece assim:
Você está aprendendo HTML com acentuação.
Principais caracteres especiais no HTML
Alguns caracteres precisam de atenção porque fazem parte da própria estrutura do HTML. Os mais importantes são:
< = <
> = >
& = &
" = ”
' = ‘
Exemplo prático:
<p>Para criar um parágrafo em HTML, use a tag <p>.</p>
No navegador, aparece:
Para criar um parágrafo em HTML, use a tag <p>.
Se você colocasse <p> diretamente no texto, o navegador poderia interpretar como uma tag, e não como conteúdo escrito.
Como mostrar símbolos no HTML
Além dos acentos, o HTML permite mostrar vários símbolos por meio de entidades. Isso é útil para páginas comerciais, textos jurídicos, rodapés, preços, medidas e informações técnicas.
Exemplos:
© = ©
® = ®
™ = ™
€ = €
£ = £
¥ = ¥
¢ = ¢
° = °
± = ±
× = ×
÷ = ÷
Exemplo em uma página:
<footer>
<p>© 2026 Minha Empresa. Todos os direitos reservados.</p>
</footer>
Resultado:
© 2026 Minha Empresa. Todos os direitos reservados.
Como usar emojis e símbolos modernos no HTML
Com UTF-8, também é possível usar emojis diretamente no HTML. Basta garantir que a página tenha:
<meta charset=”UTF-8″>
Exemplo:
<p>Site atualizado com sucesso.</p>
<p>Entrega rápida e segura.</p>
Mesmo assim, em sites profissionais, é bom usar emojis com cuidado. Eles podem deixar o conteúdo mais informal, mas também podem prejudicar a aparência em alguns navegadores, sistemas antigos ou leitores de tela.
Para símbolos mais técnicos, você pode usar caracteres Unicode ou entidades específicas.
Diferença entre entidade nomeada e entidade numérica
Existem duas formas comuns de escrever entidades HTML: por nome ou por número.
Entidade nomeada:
©
Entidade numérica decimal:
©
Entidade numérica hexadecimal:
©
Todas podem representar o mesmo símbolo ©.
Na prática, as entidades nomeadas são mais fáceis de lembrar. Já as numéricas são úteis quando não existe uma entidade com nome simples ou quando você está usando caracteres Unicode mais específicos.
Quando usar acento direto e quando usar entidade HTML?
Na maioria dos projetos modernos, você pode usar acentos diretamente no texto. Isso deixa o código mais limpo, fácil de editar e simples de entender.
Use acento direto quando:
- O arquivo está em UTF-8;
- A página tem <meta charset=”UTF-8″>;
- Você está escrevendo conteúdo comum em português;
- O site é moderno;
- Você quer facilitar a manutenção do código.
Use entidade HTML quando:
- O caractere tem função no HTML, como <, > e &;
- Você precisa exibir uma tag como texto;
- Está trabalhando em um sistema antigo;
- Quer garantir compatibilidade em algum ambiente específico;
- Precisa inserir símbolos especiais com mais segurança.
Exemplo bom:
<p>O produto custa R$ 99,90 e está disponível para São Paulo.</p>
<p>Use <strong> para destacar palavras em negrito.</p>
Aqui, os acentos foram escritos normalmente, mas a tag <strong> foi convertida em texto usando entidades.
Erros comuns ao usar caracteres especiais no HTML
Alguns erros são bem frequentes, principalmente para quem está começando.
Esquecer a meta charset
Esse é o erro mais comum. Sem a codificação correta, os acentos podem ficar quebrados.
Errado:
<head>
<title>Meu site</title>
</head>
Certo:
<head>
<meta charset=”UTF-8″>
<title>Meu site</title>
</head>
Salvar o arquivo em codificação errada
Mesmo com a meta tag, o editor de código precisa salvar o arquivo em UTF-8. Programas como VS Code, Sublime Text e Notepad++ permitem verificar isso.
Se o arquivo estiver salvo em ANSI ou outra codificação antiga, os acentos podem dar problema.
Usar símbolos reservados sem entidade
Errado:
<p>5 < 10</p>
Melhor:
<p>5 < 10</p>
O navegador até pode interpretar alguns casos corretamente, mas o ideal é usar entidades quando o símbolo pode ser confundido com código.
Misturar padrões sem necessidade
Não precisa escrever todo o texto assim:
<p>Olá, você está em uma página HTML.</p>
Se o projeto usa UTF-8, é mais limpo escrever:
<p>Olá, você está em uma página HTML.</p>
Caracteres especiais em formulários HTML
Em formulários, os acentos também funcionam normalmente quando a página está em UTF-8. Campos como nome, endereço, cidade e observações podem receber textos com acentos.
Exemplo:
<form>
<label for=”nome”>Nome completo:</label>
<input type=”text” id=”nome” name=”nome”>
<label for=”cidade”>Cidade:</label>
<input type=”text” id=”cidade” name=”cidade”>
<button type=”submit”>Enviar inscrição</button>
</form>
O usuário pode digitar nomes como:
- João
- José
- Conceição
- Vitória
- André
- Luís
- Ana Cláudia
Para sistemas com banco de dados, também é importante que o servidor e o banco estejam configurados para aceitar UTF-8. Não adianta o HTML estar correto se a aplicação salva os dados com codificação errada.
Caracteres especiais em links e URLs
Acentos em URLs precisam de cuidado. Embora navegadores modernos aceitem muitos caracteres, o ideal é usar URLs amigáveis sem acentos e sem espaços.
Melhor exemplo:
<a href=”/como-usar-caracteres-especiais-html”>Leia o artigo</a>
Evite:
<a href=”/como-usar-caracteres-especiais-e-acentos-no-html”>Leia o artigo</a>
E evite ainda mais URLs com espaços ou caracteres estranhos:
<a href=”/como usar acentos no html”>Leia o artigo</a>
Para SEO, URLs simples, curtas e sem acentos costumam ser mais organizadas. O texto visível do link pode ter acento normalmente:
<a href=”/acentos-html”>Como usar acentos no HTML</a>
Caracteres especiais no título e na descrição da página
O título da página também pode usar acentos, desde que o HTML esteja em UTF-8.
Exemplo:
<title>Como Usar Caracteres Especiais e Acentos no HTML</title>
<meta name=”description” content=”Aprenda como usar acentos, símbolos e entidades HTML corretamente em páginas web.”>
Isso é importante para SEO, pois o título e a descrição aparecem nos resultados do Google. Se os acentos ficarem quebrados, a página passa uma impressão ruim e pode perder cliques.
Boas práticas para usar caracteres especiais no HTML
Para evitar problemas, siga algumas recomendações simples:
- Use sempre <meta charset=”UTF-8″>;
- Salve o arquivo em UTF-8 no editor de código;
- Escreva acentos diretamente quando possível;
- Use entidades para caracteres reservados;
- Evite acentos em nomes de arquivos e URLs;
- Teste a página em mais de um navegador;
- Cuidado ao copiar textos do Word ou de PDFs;
- Revise símbolos como aspas, travessões e apóstrofos;
- Não misture várias codificações no mesmo projeto.
Também é bom manter o código organizado. Um HTML limpo facilita correções futuras e reduz o risco de erros.
Exemplo completo de HTML com acentos e caracteres especiais
Veja um exemplo simples usando acentos, símbolos e entidades:
<!DOCTYPE html>
<html lang=”pt-BR”>
<head>
<meta charset=”UTF-8″>
<title>Caracteres Especiais no HTML</title>
<meta name=”description” content=”Aprenda a usar acentos e símbolos especiais no HTML de forma correta.”>
</head>
<body>
<h1>Como usar acentos e caracteres especiais no HTML</h1>
<p>Olá! Nesta página, você aprende como escrever palavras com acento, cedilha e símbolos.</p>
<p>Exemplo de tag como texto: <h1>Título principal</h1></p>
<p>Direitos autorais: © 2026 Minha Empresa.</p>
<p>Temperatura: 25°C</p>
<p>Comparação: 10 > 5 e 3 < 8.</p>
</body>
</html>
Esse exemplo mostra o uso correto da codificação UTF-8 e também o uso de entidades quando o caractere pode ser interpretado como parte do código.
Vale a pena decorar todas as entidades HTML?
Não precisa decorar todas. O mais importante é entender como elas funcionam e conhecer as principais. Com o tempo, você memoriza naturalmente as mais usadas.
As entidades mais importantes para lembrar são:
< <
> >
& &
" ”
© ©
® ®
espaço fixo
A entidade também é bastante conhecida. Ela cria um espaço que não quebra linha. Porém, deve ser usada com cuidado, pois pode atrapalhar a responsividade do texto.
Exemplo:
<p>R$ 99,90</p>
Nesse caso, o preço tende a ficar junto, sem quebrar entre o símbolo e o número.
Como evitar problemas de acentuação em sites profissionais
Em sites profissionais, principalmente aqueles feitos com CMS, frameworks ou sistemas próprios, o cuidado deve ir além do HTML. A configuração precisa estar correta em todas as etapas.
Confira:
- HTML em UTF-8;
- Banco de dados em UTF-8;
- Servidor configurado corretamente;
- Editor de código salvando em UTF-8;
- Templates sem codificação antiga;
- APIs retornando texto no padrão certo;
- Formulários enviando e recebendo dados corretamente.
Quando uma dessas partes está errada, podem aparecer textos como:
Informação
Você
Ação
Isso geralmente indica problema de codificação. O conteúdo existe, mas foi interpretado do jeito errado.
O que fazer quando os acentos aparecem quebrados?
Se os acentos do seu site aparecem quebrados, siga este checklist:
- Verifique se existe <meta charset=”UTF-8″>;
- Confirme se o arquivo está salvo como UTF-8;
- Teste em outro navegador;
- Veja se o problema vem do banco de dados;
- Confira se o servidor envia o cabeçalho correto;
- Evite copiar texto formatado de programas externos;
- Regrave o conteúdo problemático no padrão correto.
Em páginas HTML simples, normalmente a meta tag e o salvamento em UTF-8 já resolvem. Em sistemas maiores, pode ser necessário ajustar banco de dados, backend ou configurações do servidor.
HTML moderno aceita português sem complicação
Hoje, usar português no HTML é muito mais simples do que era antigamente. Com UTF-8, você pode escrever textos completos com acentos, cedilha, símbolos e até caracteres de outros idiomas sem precisar transformar tudo em códigos.
A melhor prática é usar acentos diretamente no conteúdo comum e reservar entidades HTML para caracteres que têm função especial no código. Assim, a página fica mais limpa, fácil de editar e compatível com os navegadores modernos.
Dominar esse detalhe parece pequeno, mas faz diferença. Um site com acentuação correta transmite profissionalismo, melhora a leitura, evita erros visuais e ajuda o usuário a confiar mais no conteúdo. Para quem trabalha com criação de páginas, SEO, programação ou edição de sites, entender como usar caracteres especiais e acentos no HTML é um conhecimento básico que evita muita dor de cabeça.
