No início da WEB, o uso de códigos para caracteres especiais do HTML era essencial até mesmo para inclusão de acentos. Com a evolução e ascensão do HTML, alguns padrões de caracteres começaram a ser incrementados e, assim, acentuações deixaram de ser um problema. Hoje em dia, a partir do metadado charset, é possível incluir o padrão a ser utilizado na página. O padrão universal da web é o UTF-8, que permite o uso de acentos e também do cedilha, entre outros.
Para incluir esse padrão ao seu código, basta acrescentar ao <head> a tag <meta> com o atributo charset e seu valor conforme o padrão a ser utilizado.
<meta charset="utf-8"/> Contudo, ainda existem algumas dificuldades na utilização de certos elementos, como os próprios chevrons <> ou copyright ©. Outro problema que você pode ter é ao utilizar letras gregas ou até mesmo símbolos financeiros ou matemáticos.
Neste tutorial, vamos explicar como funcionam as entidades do HTML para poder fazer a inclusão dos caracteres especiais.
Conteúdo
Conversor de acentos e caracteres especiais
Cole um texto para transformar acentos e símbolos em entidades HTML — por nome, decimal ou hexadecimal —, ou cole entidades para ver o texto de volta. A ferramenta também mostra a ficha de cada caractere especial, com o código para usar no CSS.
Cole um texto para transformar acentos e símbolos em entidades HTML — ou cole entidades para ver o texto de volta. Tudo acontece no seu navegador.
Na conversão para entidades, usa os 252 nomes do HTML 4, aceitos por todos os navegadores; na volta, reconhece as 2.231 entidades do HTML5. Resultados conferidos com a biblioteca html do Python. Fonte: homehost.com.br
O que são caracteres especiais
Caracteres especiais são todos os que não são letras nem números — pontuação, símbolos e sinais. No teclado, os mais comuns são:
! @ # $ % & * ( ) – _ = + [ ] { } ; : ‘ ” , . < > / ? \ | ~ ^
É esse grupo que as regras de senha pedem quando exigem “pelo menos um caractere especial”. O ponto, o hífen, o @ e o # contam. ⚠️ Letras acentuadas, como á e ç, em geral não contam — e alguns sistemas nem as aceitam em senhas. Na dúvida, confira a regra do próprio site.
Em HTML, o termo tem um sentido mais específico: são os caracteres que não podem ser digitados diretamente no código — ou porque o HTML os usa como sintaxe, como <, > e &, ou porque não estão no teclado, como © e ≠. É deles que o resto deste guia trata.
Utilizando os caracteres especiais e acentos do HTML
Existem diversas formas de incluir os caracteres especiais dentro do seu HTML, porém, atualmente, a mais eficiente e prática é o uso de entities (entidades). As entidades permitem que utilizemos caracteres que não encontramos em nosso teclado. Além disso, esse recurso permite utilizar caracteres como os chevrons <>. Também nos permite utilizar acentuações dentro de códigos que seguem outro padrão de caracteres. Portanto, além de saber como utilizar, é importante que o desenvolvedor de software tenha uma tabela desse recurso.
Uma entidade funciona sendo chamada com o caractere & (e comercial), seguido do seu nome, número decimal ou número hexadecimal, e finalizada com ; (ponto e vírgula).
As três formas de escrever uma entidade
| Forma | Copyright | Quando usar |
|---|---|---|
| Por nome | © | Legível; use sempre que existir |
| Decimal | © | Funciona para qualquer caractere Unicode |
| Hexadecimal | © | O mesmo, em base 16 |
As três produzem exatamente o mesmo ©. O hexadecimal existe porque as tabelas Unicode listam os códigos nesse formato — o U+00A9 do copyright vira © em HTML.
⚠️ E os nomes diferenciam maiúsculas de minúsculas. Á produz Á e á produz á — são caracteres diferentes. E a maioria dos nomes só existe numa grafia: &AACUTE; não funciona. Há poucas exceções criadas por compatibilidade, como © e &, mas o padrão é escrever como nas tabelas.
Veja o copyright aplicado numa frase:
<p>Todos os direitos reservados a ©Copyright</p> O resultado para este exemplo é:
Todos os direitos reservados a ©Copyright
Além disso, podemos ainda utilizar o nome dessa entidade, que no caso é © , e o resultado será o mesmo:
<p>Todos os direitos reservados a ©Copyright</p> ⚠️ Sempre feche com ponto e vírgula. Alguns navegadores toleram & sem ele, mas o comportamento varia conforme o que vem depois — e um & seguido de letra pode ser interpretado de forma inesperada.
Agora que já sabemos utilizar as entidades e como podemos inserir caracteres especiais em nosso HTML, vamos ver as principais entidades utilizadas.
O que é (espaço que não quebra)
O HTML ignora espaços repetidos. Digitar cinco espaços entre duas palavras produz só um na tela: o navegador junta espaços, tabulações e quebras de linha num único espaço.
O — non-breaking space — é um espaço que escapa desse efeito, e tem uma segunda propriedade: não permite quebra de linha naquele ponto. Por isso ele mantém juntas coisas que não devem se separar no fim da linha:
O plano custa R$ 50 e roda no Windows 11.
Existem também espaços mais largos:  , com a largura de meio “M”, e  , com a largura de um “M” inteiro. São recursos de tipografia, não de alinhamento.
⚠️ Não use em sequência para afastar ou alinhar elementos. O resultado quebra no celular e dificulta a manutenção. Para espaçamento, o caminho é o CSS, com margin e padding — nosso guia sobre espaço em HTML mostra as alternativas.
Caracteres especiais mais utilizados no HTML
Conforme é possível ver na tabela abaixo, listamos os caracteres especiais que são mais procurados e utilizados no dia a dia do desenvolvedor.
| Caractere | Nome / Descrição | Entidade por nome | Entidade por número |
|---|---|---|---|
| ␣ | Espaço fixo (non-breaking space) | |   |
| © | Copyright | © | © |
| ® | Marca registrada | ® | ® |
| ™ | Trademark | ™ | ™ |
| < | Menor que (chevron) | < | < |
| > | Maior que (chevron) | > | > |
| & | E comercial (ampersand) | & | & |
| ‘ | Apóstrofo | ' | ' |
| “ | Aspas duplas | " | " |
| ¢ | Cent | ¢ | ¢ |
| £ | Libra | £ | £ |
| ¥ | Iene | ¥ | ¥ |
| € | Euro | € | € |
| ← | Seta à esquerda | ← | ← |
| ↑ | Seta para cima | ↑ | ↑ |
| → | Seta à direita | → | → |
| ↓ | Seta para baixo | ↓ | ↓ |
| ♠ | Naipe de espadas | ♠ | ♠ |
| ♣ | Naipe de paus | ♣ | ♣ |
| ♥ | Naipe de copas | ♥ | ♥ |
| ♦ | Naipe de ouros | ♦ | ♦ |
Apesar de existirem muitos outros caracteres que podem ser utilizados, com esta lista de caracteres especiais já é possível resolver boa parte dos problemas.
⚠️ As tabelas trazem a forma por nome e a decimal. Para obter o hexadecimal, converta o número decimal para base 16 e prefixe com x — o © do copyright vira ©.
Setas em HTML
| Seta | Entidade por nome | Entidade por número |
|---|---|---|
| ← | ← | ← |
| → | → | → |
| ↑ | ↑ | ↑ |
| ↓ | ↓ | ↓ |
| ↔ | ↔ | ↔ |
| ⇐ | ⇐ | ⇐ |
| ⇒ | ⇒ | ⇒ |
| ⇔ | ⇔ | ⇔ |
Repare na diferença entre → e ⇒: só a maiúscula. A primeira é a seta simples, a segunda a dupla — mais um exemplo de que os nomes das entidades diferenciam maiúsculas de minúsculas.
Sinais diacríticos: acentuação de caracteres
Quando se trata de incluir acentos em HTML, uma das maneiras é pelos sinais diacríticos.
Existe em Unicode a possibilidade de combinar um acento com a letra seguinte, usando caracteres chamados diacríticos combinantes. Na prática do HTML, porém, o caminho usual é outro: cada letra acentuada tem sua própria entidade, e é ela que se usa. A tabela abaixo traz as combinações mais comuns em português.
Veja abaixo alguns exemplos dos mais utilizados:
| Acento | Letra | Entidade por nome | Entidade por número | Resultado |
|---|---|---|---|---|
| Crase (grave) | a | à | à | à |
| Agudo (acute) | a | á | á | á |
| Circunflexo (circ) | a | â | â | â |
| Til (tilde) | a | ã | ã | ã |
| Trema (uml) | a | ä | ä | ä |
| Cedilha (cedil) | c | ç | ç | ç |
| Crase (grave) | O | Ò | Ò | Ò |
| Agudo (acute) | O | Ó | Ó | Ó |
| Circunflexo (circ) | O | Ô | Ô | Ô |
| Til (tilde) | O | Õ | Õ | Õ |
Caracteres com acento HTML
Além da forma de acentuação através do sinal diacrítico, há também os códigos referentes aos caracteres especiais já acentuados. Veja a tabela de como incluir os caracteres com acento:
| Á | á | Â | â | À | à | Å | å |
| Á | á | Â | â | À | à | Å | å |
| Ã | ã | Ä | ä | Æ | æ | É | é |
| Ã | ã | Ä | ä | Æ | æ | É | é |
| Ê | ê | È | è | Ë | ë | Ð | ð |
| Ê | ê | È | è | Ë | ë | Ð | ð |
| Í | í | Î | î | Ì | ì | Ï | ï |
| Í | í | Î | î | Ì | ì | Ï | ï |
| Ó | ó | Ô | ô | Ò | ò | Ø | ø |
| Ó | ó | Ô | ô | Ò | ò | Ø | ø |
| Õ | õ | Ö | ö | Ú | ú | Û | û |
| Õ | õ | Ö | ö | Ú | ú | Û | û |
| Ù | ù | Ü | ü | Ç | ç | Ñ | ñ |
| Ù | ù | Ü | ü | Ç | ç | Ñ | ñ |
| Ý | ý | “ | < | > | & | ® | © |
| Ý | ý | " | < | > | & | ® | © |
Caracteres especiais para operações matemáticas e lógicas
Quando se trata de operações matemáticas ou lógicas, há uma grande dificuldade em incluir as funções, devido a seus inúmeros símbolos existentes. A fim de exemplificar, veja abaixo a tabela contendo os principais caracteres especiais do HTML. Além disso, é possível consultar ainda a referência da W3Schools, contendo todos (ou praticamente todos) os caracteres especiais para funções matemáticas e lógicas.
| ≠ | diferente de | ≠ |
| ≈ | aproximadamente igual a | ≈ |
| ≅ | aproximadamente igual a | ≅ |
| ∝ | proporcional a | ∝ |
| ≡ | idêntico a | ≡ |
| > | maior que | > |
| < | menor que | < |
| ≤ | menor ou igual | ≤ |
| ≥ | maior ou igual | ≥ |
| ± | mais ou menos | ± |
| − | sinal de subtração | − |
| × | sinal de multiplicação | × |
| ÷ | sinal de divisão | ÷ |
| ∗ | asterisco | ∗ |
| ⁄ | barra de fração | ⁄ |
| ‰ | por-mil | ‰ |
| ∫ | sinal de integral | ∫ |
| ∑ | somatório | ∑ |
| ∏ | produtório | ∏ |
| µ | Micro | µ |
| √ | raiz quadrada | √ |
| ∞ | infinito | ∞ |
| ∠ | ângulo | ∠ |
| ⊥ | perpendicular | ⊥ |
| ′ | minuto | ′ |
| ″ | segundo | ″ |
| ° | grau | ° |
| ∴ | consequentemente | ∴ |
| ⋅ | ponto | ⋅ |
| · | ponto do meio | · |
| ∂ | diferença parcial | ∂ |
| ℑ | parte imaginária do número | ℑ |
| ℵ | alef | ℵ |
| ℜ | parte real do número | ℜ |
| ∇ | nabla | ∇ |
| ⊕ | soma direta | ⊕ |
| ⊗ | produto tensorial | ⊗ |
| ∈ | pertence a | ∈ |
| ∉ | não pertence a | ∉ |
| ∩ | interseção | ∩ |
| ∪ | união | ∪ |
| ⊂ | subconjunto de | ⊂ |
| ⊃ | superconjunto de | ⊃ |
| ⊆ | subconjunto de ou igual a | ⊆ |
| ⊇ | superconjunto de ou igual a | ⊇ |
| ∃ | existe | ∃ |
| ∀ | qualquer | ∀ |
| ∅ | vazio | ∅ |
| ¬ | não/not lógico | ¬ |
| ∧ | e/and lógico | ∧ |
| ∨ | ou/or lógico | ∨ |
| ◊ | losango | ◊ |
| ↵ | retorno/return | ↵ |
| ⌈ | teto esquerdo | ⌈ |
| ⌉ | teto direito | ⌉ |
| ⌊ | piso esquerdo | ⌊ |
| ⌋ | piso direito | ⌋ |
Caracteres especiais para letras gregas
Assim como os caracteres matemáticos, as letras gregas são muito utilizadas, inclusive aliadas a operações matemáticas. Para exemplificar, temos uma lista com os caracteres especiais referente às principais letras gregas.
| Alpha | α | α | Α | Α |
| Beta | β | β | Β | Β |
| Gama | γ | γ | Γ | Γ |
| Delta | δ | δ | Δ | Δ |
| Épsilon | ε | ε | Ε | Ε |
| Zeta | ζ | ζ | Ζ | Ζ |
| Eta | η | η | Η | Η |
| Theta | θ | θ | Θ | Θ |
| Iota | ι | ι | Ι | Ι |
| Kappa | κ | κ | Κ | Κ |
| Lâmbda | λ | λ | Λ | Λ |
| Mú | μ | μ | Μ | Μ |
| Nú | ν | ν | Ν | Ν |
| Xi | ξ | ξ | Ξ | Ξ |
| Omicron | ο | ο | Ο | Ο |
| Pi | π | π | Π | Π |
| Rô | ρ | ρ | Ρ | Ρ |
| Sigma | σ | σ | Σ | Σ |
| Sigma final | ς | ς | ϖ | ϖ |
| Tau | τ | τ | Τ | Τ |
| Upsilon | υ | υ | Υ | Υ |
| Phi | φ | φ | Φ | Φ |
| Chi | χ | χ | Χ | Χ |
| Psi | ψ | ψ | Ψ | Ψ |
| Ômega | ω | ω | Ω | Ω |
| Thetasym | ϑ | ϑ | ϒ | ϒ |
Outros caracteres especiais HTML
Com os caracteres listados nos tópicos anteriormente, já é possível atender a quase todas as necessidades de uso desses caracteres e acentos HTML. Porém, é importante saber que existem diversos outros caracteres que podem ser utilizados para fins diversos.
Usando símbolos no CSS
Se você precisar de um símbolo em ::before ou ::after, o formato é outro — CSS não entende entidades HTML.
Use a barra invertida com o código hexadecimal, sem o &#x e sem o ponto e vírgula:
.item::before {
content: "\00A9";
} O © do HTML vira \00A9 no CSS. É o mesmo código Unicode, com sintaxe diferente.
⚠️ Complete com zeros até quatro dígitos. Sem isso, o navegador pode juntar o código com o caractere seguinte e exibir algo errado.
E emojis funcionam pelo mesmo mecanismo. Eles são caracteres Unicode como qualquer outro: 😀 produz 😀. Mas com <meta charset="utf-8"> declarado, você pode simplesmente colar o emoji no código — que é o caminho mais prático.
Se o problema não estiver no HTML
Quando a página já declara <meta charset="utf-8"> e os acentos continuam quebrados, a origem costuma ser outra: o texto vem de um banco de dados gravado ou lido em charset diferente. Nosso guia sobre acentuação quebrada no MySQL explica os quatro pontos onde o charset é definido e como alinhá-los.
O tipo de erro indica o lado do problema. Se aparece é no lugar de é — ou ç no lugar de ç —, o texto está em UTF-8 mas está sendo lido como ISO-8859-1. Se aparece �, um losango com ponto de interrogação, é o contrário: texto em ISO-8859-1 sendo lido como UTF-8.
O que significa charset?
O termo “charset” é uma abreviação de “character set”, que em português significa “conjunto de caracteres”. No contexto da web e da codificação de texto, o charset se refere a um conjunto específico de caracteres que são usados para representar e exibir o texto em um determinado idioma ou sistema de escrita.
Cada conjunto de caracteres possui uma codificação associada, que define como os caracteres são representados em bits. A codificação mais comum utilizada na web é o UTF-8 (Unicode Transformation Format 8 bits), que suporta uma ampla gama de caracteres internacionais.
Ao definir o charset em uma página HTML, você está especificando qual conjunto de caracteres está sendo utilizado no conteúdo dessa página. Isso é importante para garantir que os caracteres sejam exibidos corretamente nos navegadores e aplicativos que acessam a página.
A definição do charset é feita por meio da meta tag <meta charset="charset"> no cabeçalho da página HTML, em que “charset” é substituído pelo nome do conjunto de caracteres desejado, como UTF-8, ISO-8859-1, entre outros.
Portanto, o charset determina a codificação de caracteres utilizada em um texto e é crucial para garantir a correta exibição e interpretação do conteúdo, especialmente em casos envolvendo caracteres especiais, idiomas diferentes e sistemas de escrita específicos.
O que significa UTF-8?
UTF-8 é uma codificação de caracteres que faz parte do padrão Unicode. O termo “UTF” significa “Unicode Transformation Format”, e o número “8” refere-se ao número de bits usados para representar cada caractere.
O Unicode é um padrão internacional que atribui um número único (chamado código) para cada caractere de quase todos os sistemas de escrita conhecidos no mundo. Ele permite a representação de uma ampla gama de caracteres, incluindo caracteres alfabéticos, numéricos, símbolos e caracteres especiais de diferentes idiomas e sistemas de escrita.
O UTF-8 é uma das formas mais populares de codificar caracteres Unicode. Ele utiliza de 1 a 4 bytes para representar cada caractere, dependendo do seu código Unicode. Essa flexibilidade permite que o UTF-8 seja eficiente em termos de armazenamento e transmissão de dados, pois caracteres comuns em idiomas populares são representados com menos bytes, enquanto caracteres menos comuns ou específicos são representados com mais bytes.
Uma das principais vantagens do UTF-8 é que ele é compatível com o ASCII (American Standard Code for Information Interchange), um conjunto de caracteres amplamente utilizado em sistemas de computadores. Isso significa que textos em ASCII podem ser interpretados corretamente como UTF-8, tornando a transição de sistemas mais antigos para o UTF-8 mais fácil e sem a necessidade de conversão de todos os caracteres.
Em resumo, o UTF-8 é uma codificação de caracteres que permite a representação de uma ampla gama de caracteres Unicode, tornando possível a exibição correta de textos em diferentes idiomas e sistemas de escrita. É amplamente adotado na web e em sistemas de comunicação para garantir a interoperabilidade entre diferentes plataformas e idiomas.
Perguntas frequentes
O que são entidades HTML?
São códigos que representam caracteres que não podem ser digitados diretamente no HTML, ou que o próprio HTML usa como sintaxe. Toda entidade começa com & e termina com ;, e pode ser escrita de três formas: por nome (©), por número decimal (©) ou por número hexadecimal (©). As três produzem o mesmo resultado.
Como converter acentos em entidades HTML?
Troque cada caractere pela sua entidade: á vira á, ç vira ç e ã vira ã. Para um texto inteiro, use o conversor no início deste artigo, que transforma acentos e símbolos em entidades por nome, decimal ou hexadecimal — e também faz o caminho de volta.
Preciso usar entidades para acentos hoje em dia?
Não. Com <meta charset="utf-8"> no <head>, você digita á, ç e ã normalmente e eles aparecem corretos. As entidades continuam necessárias apenas para os caracteres que o HTML usa como sintaxe — <, > e & — e para símbolos que não estão no teclado, como ™ e ≠.
Qual a diferença entre entidade por nome, decimal e hexadecimal?
Nenhuma no resultado. O nome é mais legível para quem lê o código, mas existe só para uma parte dos caracteres. O decimal e o hexadecimal funcionam para qualquer caractere Unicode — e o hexadecimal é a forma como as tabelas Unicode listam os códigos, com o U+00A9 virando ©.
As entidades HTML diferenciam maiúsculas de minúsculas?
Sim. Á produz Á e á produz á — são caracteres diferentes, não variações de escrita. E a maioria dos nomes só existe numa grafia: &AACUTE; não funciona. Algumas poucas entidades, como ©, aceitam maiúsculas por compatibilidade, mas o seguro é sempre usar a grafia das tabelas.
Preciso mesmo do ponto e vírgula no fim da entidade?
Sim. Alguns navegadores toleram entidades sem ele em certos contextos, mas o comportamento varia conforme o caractere seguinte — um & seguido de letra pode ser interpretado de forma inesperada. Sempre feche com ;.
Por que preciso escrever & em vez de &?
Porque o & é o caractere que inicia uma entidade. Se você escrever Silva & Filhos, o navegador tenta interpretar o que vem depois do & como entidade e pode exibir algo inesperado. Escrevendo Silva & Filhos, ele entende que você quer o símbolo literal.
Meus acentos aparecem como símbolos estranhos. O que fazer?
Confira se a página declara <meta charset="utf-8"> logo no início do <head> — antes de qualquer texto. Se estiver lá e o problema persistir, verifique se o arquivo foi salvo em UTF-8 pelo editor, e se o texto não vem de um banco de dados com codificação diferente.
Como escrever um espaço que não quebra a linha no HTML?
Com . Ele mantém duas palavras juntas mesmo quando o navegador precisa quebrar a linha — útil em coisas como R$ 50 ou Windows 11. Existem também   e  , que criam espaços mais largos.
Como mostrar código HTML numa página sem que ele seja executado?
Substitua os chevrons pelas entidades: escreva <p> para que apareça <p> na tela em vez de criar um parágrafo — e o & por &. O conversor no início deste artigo faz isso automaticamente: escolha a opção “só o que o HTML exige”.
Como uso um símbolo especial no CSS?
Com outra sintaxe. O CSS não entende entidades HTML — use a barra invertida com o código hexadecimal, sem o &#x e sem o ponto e vírgula: content: "\00A9". Complete com zeros até quatro dígitos, ou o navegador pode juntar o código com o caractere seguinte. O conversor mostra esse formato na coluna “No CSS”.
Dá para usar emojis por entidade HTML?
Dá — eles são caracteres Unicode como qualquer outro, e 😀 produz 😀. Mas com a página em UTF-8, colar o emoji direto no código é mais prático e igualmente confiável.
O que significa charset?
É a abreviação de character set — o conjunto de caracteres que a página usa. A declaração <meta charset="utf-8"> informa ao navegador qual tabela consultar para transformar os bytes do arquivo nas letras que aparecem na tela. Sem ela, ele tenta adivinhar — e às vezes erra.
O que é UTF-8?
É a codificação padrão da web, parte do Unicode. Ela usa de 1 a 4 bytes por caractere e cobre praticamente todos os sistemas de escrita do mundo, dos acentos do português aos ideogramas chineses e aos emojis. Caracteres comuns ocupam menos bytes, e ela é compatível com ASCII, o que facilitou sua adoção.
Usar caracteres especiais afeta o SEO?
Diretamente, não. O que afeta é o resultado de usá-los errado: uma página com acentos quebrados prejudica a leitura e a experiência do visitante. Declarar o charset corretamente resolve isso.
Um arquivo HTML no seu computador só existe para você. Na Homehost, você envia os arquivos pelo painel ou por FTP e o site fica no ar em minutos — com servidor no Brasil, SSL grátis e suporte em português. A partir de R$ 7,90/mês, com domínio grátis no primeiro ano dos planos anuais.
Ver planos de hospedagemConclusão
As entidades HTML nasceram de uma limitação que já não existe: no começo da web, o conjunto de caracteres disponível não comportava acentos, e cada á precisava ser escrito como código. Com o UTF-8 declarado no <head>, isso acabou — você digita em português normalmente e funciona.
O que sobrou é o essencial, e cabe em três casos. Os caracteres que o HTML usa como sintaxe — <, > e & — precisam ser escapados, ou o navegador os interpreta como código. Os símbolos fora do teclado, como ™, €, ≠ e as letras gregas, continuam mais práticos por entidade. E o , que mantém palavras juntas quando a linha quebra.
Se os acentos estão aparecendo errados, a resposta quase sempre está no charset — não nas entidades. Confira se o <meta charset="utf-8"> está no <head>, se o arquivo foi salvo nessa codificação, e se o texto não vem de um banco configurado de outro jeito.