Caracteres especiais e acentos no código HTML

Caracteres Especiais e Acentos HTML

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.

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.

15% OFF

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

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:

Ainda não tem um www

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:

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 &nbsp; (non-breaking space). Com o objetivo de acrescentar espaços entre nossos elementos, basta o acréscimo do &nbsp; dentro do código. Veja no exemplo abaixo, utilizando quatro espaços entre as duas palavras:

Como resultado, teremos:

Home    Host.

Da mesma forma, existem ainda os caracteres especiais HTML que adicionam dois ou quatro espaços: &ensp; e &emsp;. Vejamos então o exemplo abaixo:

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 &nbsp;
© Copyright &copy; ©
® Marca Registrada &reg; ®
< Menor que/Chevron &lt; <
> Maior Que/Chevron &gt; >
& ampersand/ E comercial/And &amp; &
Apóstofro &apos;
Apóstrofo Duplo &quot;
¢ Cent &cent; ¢
£ Libra &pound; £
¥ Yen &yen; ¥
Euro &euro;
&trade; TradeMark
&larr; Seta a Esquerda
&uarr; Seta para Cima
&rarr; Seta para Direita
&darr; Seta para Baixo
&spades; Naipe Espadas
&clubs; Naipe Paus
&hearts; Naipe Copas
&diams; 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:

Á á Â â À à Å å
&Aacute; &aacute; &Acirc; &acirc; &Agrave; &agrave; &Aring; &aring;
à ã Ä ä Æ æ É é
&Atilde; &atilde; &Auml; &auml; &AElig; &aelig; &Eacute; &eacute;
Ê ê È è Ë ë Ð ð
&Ecirc; &ecirc; &Egrave; &egrave; &Euml; &Euml; &ETH; &eth;
Í í Î î Ì ì Ï ï
&Iacute; &iacute; &Icirc; &icirc; &Igrave; &igrave; &Iuml; &iuml;
Ó ó Ô ô Ò ò Ø ø
&Oacute; &oacute; &Ocirc; &ocirc; &Ograve; &ograve; &Oslash; &oslash;
Õ õ Ö ö Ú ú Û û
&Otilde; &otilde; &Ouml; &ouml; &Uacute; &uacute; &Ucirc; &ucirc;
Ù ù Ü ü Ç ç Ñ ñ
&Ugrave; &ugrave; &Uuml; &uuml; &Ccedil; &ccedil; &Ntilde; &ntilde;
Ý ý < > & ® ©
&Yacute; &yacute; &quot; &lt; &gt; &amp; &reg; &copy;

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 &ne;
aproximadamente igual a &asymp;
aproximadamente igual a &cong;
proporcional a &prop;
idêntico a &equiv;
> maior que &gt;
< menor que &lt;
menor ou igual &le;
maior ou igual &ge;
± mais ou menos &plusmn;
sinal de subtração &minus;
× sinal de multiplicação &times;
÷ sinal de divisão &divide;
asterisco &lowast;
 ⁄ barra de fração &frasl;
por-mil &permil;
sinal de integral &int;
somatório &sum;
PI &prod;
µ Micro &micro;
raiz quadrada &radic;
infinito &infin;
ângulo &ang;
perpendicular &perp;
minuto &prime;
segundo &Prime;
° grau &deg;
consequentemente &there4;
ponto &sdot;
· ponto do meio &middot;
diferença parcial &part;
parte imaginária do número &image;
alef &alefsym;
parte real do número &real;
nabla &nabla;
soma direta &oplus;
produto de vetor &otimes;
ø produto vazio &oslash;
Ø produto vazio &Oslash;
pertence a &isin;
não pertence a &notin;
interseção &cap;
união &cup;
subconjunto de &sub;
superconjunto de &sup;
subconjunto de ou igual a &sube;
superconjunto de ou igual a &supe;
existe &exist;
qualquer &forall;
vazio &empty;
¬ não/not lógico &not;
e/and lógico &and;
ou/or lógico &or;
losango &loz;
retorno/return &crarr;
teto esquerdo &lceil;
teto direito &rceil;
piso esquerdo &lfloor;
piso direito &rfloor;

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 α &alpha; Α &Alpha;
Beta β &beta; Β &Beta;
Gama γ &gamma; Γ &Gamma;
Delta δ &delta; Δ &Delta;
Épsilon ε &epsilon; Ε &Epsilon;
Zeta ζ &zeta; Ζ &Zeta;
Eta η &eta; Η &Eta;
Tetha θ &theta; Θ &Theta;
Iota ι &iota; Ι &Iota;
Kapa κ &kappa; Κ &Kappa;
Lâmbda λ &lambda; Λ &Lambda;
μ &mu; Μ &Mu;
ν &nu; Ν &Nu;
Xi ξ &xi; Ξ &Xi;
Omicron ο &omicron; Ο &Omicron;
π &pi; Π &Pi;
ρ &rho; Ρ &Rho;
Sigma σ &sigma; Σ &Sigma;
Sigma ς &sigmaf; ϖ &piv;
Tau τ &tau; Τ &Tau;
Upsilon υ &upsilon; Υ &Upsilon;
Phi φ &phi; Φ &Phi;
Chi χ &chi; Χ &Chi;
Psi ψ &psi; Ψ &Psi;
Ômega ω &omega; Ω &Omega;
Thetasym ϑ &thetasym; ϒ &upsih;

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:

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.

Publicado por

Rafael Marques

Desenvolvedor Web especialista em Front End apaixonado por tecnologia! www.instagram.com/rafaelmarquesdev/ linkedin.com/in/rafamarquesrmb/

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

hhchat