📆 TDC Floripa 2025: Inscrições com 20% DE DESCONTO e INGRESSOS GRATUITOS 🚀

Tutorial – Caracteres Especiais e a Meta Tag Charset no HTML

Publicado em 15/09/2015

Atualizado em 04/06/2024

É normal se deparar com caracteres estranhos, como é, ão ou  Ãª, ao escrever um texto em um ambiente online. Uma forma de resolver esse problema é utilizar as listas de caracteres especiais ou, ainda melhor, declarar a meta tag charset no seu código.

Se você utiliza um gerenciador de conteúdos para atualizar seu site/blog, isso provavelmente não será problema. Porém, para quem está desenvolvendo ou precisa fazer atualizações direto no código da página é preciso utilizar códigos especiais para cada tipo de símbolo ou resolver esse problema declarando a meta tag charset.

Essas soluções foram desenvolvidas para lidar com as limitações do HTML, que foi inicialmente desenvolvido para atender a língua Inglesa. Esse idioma não utiliza acentos, como o agudo, o circunflexo, a crase ou outros que o Português utiliza. O mesmo acontece se levarmos em conta outras línguas como o Chinês, Russo, Mandarim, etc.

Como alternativa, o HTML foi se adaptando e permitindo que sequências de escape representassem acentos e outros caracteres especiais. Essas sequências especiais possuem três partes: um & inicial, um número ou ordem de caracteres que correspondem ao caracter desejado, e um ; final. Outra forma de utilizar os acentos e símbolos sem se preocupar é através da meta tag charset.

Charset: o que é e como utilizar

Através da meta tag charset, você informa ao browser qual o tipo de codificação de caracteres deve ser utilizado para mostrar seu conteúdo. O utf-8 é um padrão de codificação Unicode bastante utilizado. Este padrão representa qualquer carácter universal no padrão do Unicode, sendo inclusive compatível com o ASCII.

Por exemplo, para definir o utf-8, usamos a seguinte sintaxe: <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>

Algumas tabelas para o uso de caracteres especiais

Os três caracteres ‘<’, ‘>’, e ‘&’ têm significados especiais em HTML, eles são utilizados no código dos documentos. Para utilizá-los no texto, utilize as seguintes entidades:

Entidade Carácter
&lt; <
&gt; >
&amp; &

 

Lista com acentos e símbolos:

 

Á ………….. &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;

< …………….. &lt;

> …………….. &gt;

& ……………. &amp;

” …………….. &quot;

Ý ………… &Yacute;

ý ………… &yacute;

Þ ………….. &THORN;

þ ……………. &thorn;

ß ……………. &szlig;

Lista com símbolos comerciais:

© copyright &copy;
® marca registrada &reg
trade mark &trade;
£ libra esterlina &pound;
¢ centavo &cent;
euro &euro;
¥ iene (yen) &yen;
¤ símbolo monetário &curren;

 

O que você achou deste conteúdo?

O que você achou deste conteúdo?

Leonéia
Leonéia Evangelista
é bacharel em Comunicação Digital pela Unisinos e mestre em Bibliotecas Digitais pelo programa Digital Library Learning (Erasmus Mundus). Trabalha com web há mais de 8 anos e atualmente cursa MBA em Marketing Estratégico.
Leonéia
Leonéia Evangelista
é bacharel em Comunicação Digital pela Unisinos e mestre em Bibliotecas Digitais pelo programa Digital Library Learning (Erasmus Mundus). Trabalha com web há mais de 8 anos e atualmente cursa MBA em Marketing Estratégico.

Compartilhe esse conteúdo com alguém que possa gostar também

Receba todo mês conteúdos
incríveis como esses para
seguir evoluindo

Conteúdos relacionados

Se você chegou até este artigo, provavelmente está pensando em criar um site WordPress para sua empresa, blog pessoal, portfólio ou loja virtual. Seja qual for o objetivo, escolher WordPress como plataforma é uma decisão estratégica inteligente. Esse sistema de gestão de conteúdo (CMS) conquistou milhões de sites ao redor do mundo e é sinônimo...
A inteligência artificial (IA) não é mais uma promessa distante, mas sim uma realidade que está remodelando o cenário do desenvolvimento de aplicativos. A demanda por apps que não apenas funcionam, mas que também aprendem, se adaptam e antecipam as necessidades dos usuários está em alta.  Integrar a IA em seus aplicativos oferece uma gama...

Mensagens para você