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
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 finalizado com o ; (ponto e vírgula). Por exemplo: se você quiser utilizar o símbolo do copyright (©) em uma frase, basta utilizar o seu código como entidade dentro da frase. Para esse exemplo, vamos utilizar o hexadecimal do caractere especial copyright:
<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>Agora que já sabemos utilizar as entidades e como podemos inserir caracteres especiais em nosso HTML, vamos ver as principais entidades utilizadas.
Espaço: non-breaking space
A entidade que representa a tecla do espaço é a (non-breaking space). Com o objetivo de acrescentar espaços entre nossos elementos, basta o acréscimo do dentro do código. Veja no exemplo abaixo, utilizando quatro espaços entre as duas palavras:
<p>Home Host.</p>Como resultado, teremos:
Home Host.
Da mesma forma, existem ainda os caracteres especiais HTML que adicionam dois ou quatro espaços:   e   . Vejamos então o exemplo abaixo:
<p>Home Host.</p>
<p>Home Host.</p>
<p>Home Host.</p>O resultado será:
Home Host.
Home Host.
Home Host.
Portanto, essa técnica facilita muito o trabalho do desenvolvedor, permitindo utilizar inclusive regras de tabulações, que são muito importantes para a escrita de códigos. Você pode aprender mais sobre espaçamento através do nosso artigo sobre espaço HTML.
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.
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 | ∑ |
| ∏ | PI | ∏ |
| µ | 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 de vetor | ⊗ |
| ø | produto vazio | ø |
| Ø | produto vazio | Ø |
| ∈ | 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 | η | η | Η | Η |
| Tetha | θ | θ | Θ | Θ |
| Iota | ι | ι | Ι | Ι |
| Kapa | κ | κ | Κ | Κ |
| Lâmbda | λ | λ | Λ | Λ |
| Mú | μ | μ | Μ | Μ |
| Nú | ν | ν | Ν | Ν |
| Xi | ξ | ξ | Ξ | Ξ |
| Omicron | ο | ο | Ο | Ο |
| Pí | π | π | Π | Π |
| Rô | ρ | ρ | Ρ | Ρ |
| Sigma | σ | σ | Σ | Σ |
| Sigma | ς | ς | ϖ | ϖ |
| 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.
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 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 por nome (©) ou por número (©). As duas formas produzem o mesmo resultado.
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 e por número?
Nenhuma no resultado. © e © produzem o mesmo ©. O nome é mais legível para quem lê o código; o número funciona para qualquer caractere Unicode, inclusive os que não têm nome definido. Use o nome quando existir, o número quando não.
Por que preciso escrever & em vez de &?
Porque o & é o caractere que inicia uma entidade. Se você escrever Silva & Filhos, o navegador tenta interpretar & Filhos como uma 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?
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?
Substituindo os chevrons pelas entidades: escreva <p> para que apareça <p> na tela em vez de criar um parágrafo. É por isso que as tabelas deste artigo mostram &copy; no código-fonte para exibir © na página.
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 adivinha — e às vezes adivinha errado.
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, o que a torna eficiente — 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 e é o suficiente.
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.
