No inicio 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 metadados charset, é possível incluir o padrão a ser utilizado na página. Na América Latina, esse padrão é o UTF-8, que permite o uso de acentos e também do cedilha, entre outros. Usar caracteres especiais ajudará também o SEO de seu site.
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ções de certos elementos, como os próprios chevrons (<>), ou o o 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.
Os tópicos deste artigo são:
- Utilizando os caracteres especiais e acentos do HTML
- Espaço: non-breaking space
- Caracteres especiais mais utilizados no HTML
- Sinais diacríticos: acentuação de caracteres
- Caracteres com acento HTML
- Caracteres especiais para operações matemáticas e lógicas
- Caracteres especiais para letras gregas
- Outros caracteres especiais HTML
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 o desenvolvedor ter 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 é copy, 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 |
---|---|---|---|
Non breaking space | | ||
© | Copyright | © | © |
® | Marca Registrada | ® | ® |
< | Menor que/Chevron | < | < |
> | Maior Que/Chevron | > | > |
& | ampersand/ E comercial/And | & | & |
‘ | Apóstofro | ' | ‘ |
“ | Apóstrofo Duplo | " | “ |
¢ | Cent | ¢ | ¢ |
£ | Libra | £ | £ |
¥ | Yen | ¥ | ¥ |
€ | Euro | € | € |
™ | ™ | ™ | TradeMark |
← | ← | ← | Seta a Esquerda |
↑ | ↑ | ↑ | Seta para Cima |
→ | → | → | Seta para Direita |
↓ | ↓ | ↓ | Seta para Baixo |
♠ | ♠ | ♠ | Naipe Espadas |
♣ | ♣ | ♣ | Naipe Paus |
♥ | ♥ | ♥ | Naipe Copas |
♦ | ♦ | ♦ | Naipe 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 é através dos sinais diacríticos.
Os sinais diacríticos são caracteres especiais utilizados sobre outros caracteres. Nesse sentido, são muito utilizados para incluir acentos a caracteres alfanuméricos dentro do HTML. Assim, é possível utilizar uma combinação do diacrítico com um outro caractere através do código, para isso basta colocar o caractere anterior ao código da entidade. Veja abaixo alguns exemplos dos mais utilizados:
Acento | Caractere | Combinação | Resultado |
---|---|---|---|
̀ | a | à | à |
́ | a | á | á |
̂ | a | â | â |
̃ | a | ã | ã |
̀ | O | Ò | Ò |
́ | O | Ó | Ó |
̂ | O | Ô | Ô |
̃ | 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 existente. A fim de exemplificar, veja abaixo a tabela contendo os principais caracteres especiais do HTML. Além disso, é possível consultar ainda a documentação oficial da W3C, 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. Por isso, listamos abaixo algumas recomendações que podem ser encontradas na documentação oficial da W3C Schools:
- Operadores matemáticos;
- Formas geométricas;
- Setas diversas (arrows);
- Símbolos de moedas;
- Pontuações gerais;
- Símbolos diversos;
- Emojis;
- Emojis de smileys .
Além disso, ainda utilizando a documentação da W3C Schools, há uma seção contendo quase todas as entidades separadas por ordem alfabética. Acesse aqui e navegue através da barra lateral.