Deblogger

Caracteres especiais em HTML

Em HTML, precisamos usar muitas vezes alguns “códigos” no lugar dos caracteres especiais, para que o navegador os reconheça. Existem algumas dificuldades na utilizações de alguns caracteres, como os chevrons (<>), ou o o copyright (©). Da mesma forma, você pode ter problemas ao utilizar letras gregas ou até mesmo símbolos financeiros ou matemáticos.

Ao passo que existem muitas dificuldades na utilização dos caracteres especiais, existem diversas soluções para incluí-los dentro do HTML, porém, atualmente, a mais eficiente e prática é o uso de entities (entidades). Elas permitem que utilizemos caracteres que não encontramos em nosso teclado, além de permitir utilizar acentuações dentro de códigos que seguem outro padrão de caracteres. Portanto, além de saber como utilizar, é importante o programador ter uma tabela desse recurso.

Como funcionam as entities?

Uma entity funciona sendo chamada com o caractere & seguido do seu nome, número decimal ou número hexadecimal e finalizado com o ;. Um exemplo bem prático é querer colocar mais de um espaço no HTML:

<p>Vários espaços a seguir:                           [Fim dos espaços]</p>

Se você tentar rodar o código acima, terá a seguinte visualização:

Vários espaços a seguir: [Fim dos espaços]

Isso acontece porque o HTML ignora quando há mais de um espaço. Você pode usar a entity de espaço, que é a &nbsp;:

<p>Vários espaços a seguir:           [Fim dos espaços]</p>

Assim, o HTML interpreta a entity e coloca um espaço em seu lugar:

Vários espaços a seguir:            [Fim dos espaços]

Separei abaixo algumas tabelas que tem os caracteres e suas correspondências. Não espero que você leia uma a uma, mas salve essas tabelas para uso futuro: você nunca sabe quando precisará de uma entity para inserir no seu código.


Caracteres especiais

 espaço&nbsp;&e comercial&amp;ˆacento circunflexo&circ;˜acento til&tilde;
¨acento trema&uml;´acento agudo&cute;¸cedilha&cedil;aspas duplas&quot;
aspas duplas esquerda&ldquo;aspas duplas direita&rdquo;aspas simples esquerda&lsquo;aspas simples direita&rsquo;
aspas baixas simples&sbquo;aspas baixas duplas&bdquo;ºordenal masculino&ordm;ªordinal feminino&ordf;
aspas angulares simples esquerda&lsaquo;aspas angulares simples direita&rsaquo;«aspas angulares duplas esquerda&laquo;»aspas angulares duplas direita&raquo;
travessão ‘en’&ndash;travessão ‘em’&mdash; hífen oculto&shy;¯macron&macr;
reticências&hellip;¦barra vertical&brvbar;marcador&bull;marcador triangular&`#8227`;
parágrafo&para;§parágrafo legal&sect;
Tabela de entities de caracteres especiais

Caracteres matemáticos e lógicos

diferente&ne;nabla&nabla;
quase igual&asymp;aproximadamente igual&cong;
proporcional&prop;idêntico&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;
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;
soma direta&oplus;produto de vetor&otimes;
øproduto vazio&oslash;Øproduto vazio&Oslash;
elemento de/pertence a&isin;nã é elemento de&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 lógico&not;
e lógico&and;ou lógico&or;
losango&loz;retorno de carro&crarr;
teto esquerdo&lceil;teto direito&rceil;
piso esquerdo&lfloor;piso direito&rfloor;
Tabela de entities de caracteres matemáticos e lógicos

Caracteres gregos

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

Conclusão

Em síntese, esse artigo foi feito para você ter acesso a uma tabela atualizada com as entities para inserir caracteres especiais na sua página HTML. Dessa forma, você pode consultar quando necessário, ou salvar um arquivo no seu computador com essas informações. No próximo artigo, voltaremos a falar sobre tags no HTML, para aumentar o repertório do que você já aprendeu nos artigos anteriores.



Avalie:
0 (0)

Publicado por Mauro Oliveira

Desenvolvedor apaixonado por JavaScript, especialista em VueJS. Atualmente focado em padrões de projeto e código, estudando sobre testes unitários, Clean Code e segurança em aplicações Web, Mobile e Desktop.

Deixe um comentário

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