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.
|
1 |
<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:
|
1 |
<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:
|
1 |
<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:
|
1 |
<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:
|
1 2 3 |
<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.
