HTML: Entidades, Símbolos e Caracteres Especiais Explicados

As entidades de caracteres HTML são códigos utilizados para representar caracteres especiais em páginas web. Esses códigos são essenciais para exibir símbolos que poderiam ser interpretados pelo navegador como parte do código HTML ou que não estão disponíveis no teclado.

---

Estrutura de uma Entidade HTML

Uma entidade de caractere HTML é composta por:

1. Código Simbólico: Nome descritivo do caractere, iniciado por & e terminado com ;.
   Exemplo: & para o caractere & (ampersand).
2. Código Numérico: Representação do caractere com base no código Unicode ou ASCII, iniciado por &# (decimal) ou &#x (hexadecimal).
   Exemplo: & ou & representam &.

O navegador interpreta esses códigos e exibe o caractere correspondente na página web.

---

Tabela de Entidades HTML Mais Usadas

1. Símbolos Comuns

Caractere	Código Simbólico	Código Numérico	Descrição
&	&	&	E comercial (ampersand).
<	&lt;	&#60;	Menor que.
>	&gt;	&#62;	Maior que.
"	&quot;	&#34;	Aspas duplas.
'	&apos;	&#39;	Aspas simples.

2. Símbolos Monetários

Caractere	Código Simbólico	Código Numérico	Descrição
$	N/A	$	Símbolo do dólar.
€	€	€	Símbolo do euro.
£	£	£	Símbolo da libra esterlina.
¥	¥	¥	Símbolo do iene.
¢	¢	¢	Símbolo do centavo.

3. Símbolos Matemáticos

Caractere	Código Simbólico	Código Numérico	Descrição
+	N/A	+	Sinal de adição.
-	N/A	-	Sinal de subtração.
×	×	×	Sinal de multiplicação.
÷	÷	÷	Sinal de divisão.
≈	≈	≈	Aproximadamente igual.
≠	≠	≠	Diferente.
≤	≤	≤	Menor ou igual.
≥	≥	≥	Maior ou igual.

4. Pontuação e Outros Símbolos

Caractere	Código Simbólico	Código Numérico	Descrição
©	©	©	Símbolo de copyright.
®	®	®	Símbolo de marca registrada.
™	™	™	Símbolo de marca comercial.
°	°	°	Símbolo de graus.
•	•	•	Ponto ou marcador.
—	—	—	Travessão longo.
–	–	–	Travessão curto.

5. Setas

Caractere	Código Simbólico	Código Numérico	Descrição
←	←	←	Seta para a esquerda.
→	→	→	Seta para a direita.
↑	↑	↑	Seta para cima.
↓	↓	↓	Seta para baixo.

6. Espaços e Quebras

Caractere	Código Simbólico	Código Numérico	Descrição
(espaço não quebrável)	 	 	Espaço não quebrável.
(espaço médio)	 	 	Espaço médio.
(espaço largo)	 	 	Espaço largo.
(espaço fino)	 	 	Espaço fino.

7. Acentos e Caracteres do Português (Latin-1)

Se sua página já declara <meta charset="UTF-8"> (como recomendamos na introdução ao HTML), você pode digitar acentos e “ç” diretamente no arquivo — não é obrigatório usar entidades para eles. Ainda assim, vale conhecer os códigos, úteis em templates gerados dinamicamente ou em sistemas legados sem UTF-8:

Caractere	Código Simbólico	Código Numérico	Descrição
á	á	á	A com acento agudo.
ã	ã	ã	A com til.
â	â	â	A com acento circunflexo.
é	é	é	E com acento agudo.
ê	ê	ê	E com acento circunflexo.
í	í	í	I com acento agudo.
ó	ó	ó	O com acento agudo.
õ	õ	õ	O com til.
ú	ú	ú	U com acento agudo.
ç	ç	ç	C cedilhado.

---

Entidade Nomeada, Numérica ou Caractere Direto? Quando Usar Cada Uma

Com UTF-8 disponível em praticamente todos os navegadores modernos, nem sempre é óbvio quando vale a pena usar uma entidade em vez do próprio caractere. Um bom critério prático:

Situação	Recomendação
Caracteres com função sintática no HTML (<, >, &)	Sempre usar entidade (&lt;, &gt;, &amp;) — nunca o caractere literal
Acentos, “ç”, símbolos de moeda em texto comum	Digitar o caractere direto (é, ç, €), desde que o arquivo esteja salvo em UTF-8 e a página declare <meta charset="UTF-8">
Espaço não quebrável, travessões, aspas tipográficas	Usar entidade (&nbsp;, &mdash;) — mais explícito e visível no código-fonte do que um espaço “invisível”
Símbolos raros ou fora do teclado (setas, matemáticos)	Entidade nomeada quando existir (mais legível), ou numérica como alternativa

Erro comum — duplo escape (double-encoding): ao gerar HTML dinamicamente (por exemplo, com JavaScript ou um template server-side), é fácil escapar um texto que já contém uma entidade, produzindo & em vez de &. Isso costuma acontecer quando uma função de escape é aplicada duas vezes sobre o mesmo conteúdo — vale sempre inspecionar o HTML gerado (view-source:) quando um & aparecer visível na página em vez do símbolo esperado.

---

Quando Usar Entidades HTML

1. Evitar Conflitos no Código HTML: Caracteres como <, >, e & têm funções específicas no HTML. Usar entidades garante que eles sejam exibidos corretamente como texto.
2. Compatibilidade: Para exibir caracteres não disponíveis no teclado ou caracteres especiais em sistemas de escrita distintos.
3. Acessibilidade: Garante que navegadores e leitores de tela processem o conteúdo adequadamente.

---

Como Usar Entidades HTML

As entidades HTML podem ser usadas em qualquer lugar onde texto é exibido dentro de elementos HTML. Abaixo está um exemplo prático:

Exemplo 1: Exibir Texto com Caracteres Especiais

<p>5 &lt; 10 significa que 5 é menor que 10.</p>

Resultado:
5 < 10 significa que 5 é menor que 10.

Exemplo 2: Utilizando Símbolos Monetários

<p>O preço do produto é de &euro;50.</p>

Resultado:
O preço do produto é de €50.

Exemplo 3: Espaços Não Quebráveis

<p>Este&nbsp;é&nbsp;um&nbsp;exemplo&nbsp;com&nbsp;espaços&nbsp;fixos.</p>

Resultado:
Este é um exemplo com espaços fixos.

Com este guia, você pode usar entidades HTML para garantir que todos os caracteres especiais sejam exibidos corretamente em suas páginas web.