{"id":8869,"date":"2015-09-15T18:32:42","date_gmt":"2015-09-15T21:32:42","guid":{"rendered":"https:\/\/king.host\/blog\/?p=8869"},"modified":"2024-06-04T08:02:42","modified_gmt":"2024-06-04T11:02:42","slug":"tutorial-caracteres-especiais-e-a-meta-tag-charset-no-html","status":"publish","type":"post","link":"https:\/\/king.host\/blog\/tutoriais\/tutorial-caracteres-especiais-e-a-meta-tag-charset-no-html\/","title":{"rendered":"Tutorial – Caracteres Especiais e a Meta Tag Charset no HTML"},"content":{"rendered":"

\u00c9 normal se deparar com caracteres estranhos, como \u00c3\u00a9, \u00c3\u00a3o ou  \u00c3\u00aa, ao escrever um texto em um ambiente online. Uma forma de resolver esse problema \u00e9 utilizar as listas de caracteres especiais ou, ainda melhor, declarar a meta tag charset no seu c\u00f3digo.<\/p><\/blockquote>\n

Se voc\u00ea utiliza um gerenciador de conte\u00fados para atualizar seu site\/blog, isso provavelmente n\u00e3o ser\u00e1 problema. Por\u00e9m, para quem est\u00e1 desenvolvendo ou precisa fazer atualiza\u00e7\u00f5es direto no c\u00f3digo da p\u00e1gina \u00e9 preciso utilizar c\u00f3digos especiais para cada tipo de s\u00edmbolo ou resolver esse problema declarando a meta tag charset.<\/p>\n

Essas solu\u00e7\u00f5es foram desenvolvidas para lidar com as limita\u00e7\u00f5es do HTML, que foi inicialmente desenvolvido para atender a l\u00edngua Inglesa. Esse idioma n\u00e3o utiliza acentos, como o agudo, o circunflexo, a crase ou outros que o Portugu\u00eas utiliza. O mesmo acontece se levarmos em conta outras l\u00ednguas como o Chin\u00eas, Russo, Mandarim, etc.<\/p>\n

Como alternativa, o HTML foi se adaptando e permitindo que sequ\u00eancias de escape representassem acentos e outros caracteres especiais. Essas sequ\u00eancias especiais possuem tr\u00eas partes: um & inicial, um n\u00famero ou ordem de caracteres que correspondem ao caracter desejado, e um ; final. Outra forma de utilizar os acentos e s\u00edmbolos sem se preocupar \u00e9 atrav\u00e9s da meta tag charset.<\/p>\n

Charset: o que \u00e9 e como utilizar<\/h3>\n

Atrav\u00e9s da meta tag charset, voc\u00ea informa ao browser qual o tipo de codifica\u00e7\u00e3o de caracteres deve ser utilizado para mostrar seu conte\u00fado. O utf-8 \u00e9 um padr\u00e3o de codifica\u00e7\u00e3o Unicode bastante utilizado. Este padr\u00e3o representa qualquer car\u00e1cter universal no padr\u00e3o do Unicode, sendo inclusive compat\u00edvel com o ASCII.<\/p>\n

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

Algumas tabelas para o uso de caracteres especiais<\/h3>\n

Os tr\u00eas caracteres \u2018<\u2019, \u2018>\u2019, e \u2018&\u2019 t\u00eam significados especiais em HTML, eles s\u00e3o utilizados no c\u00f3digo dos documentos. Para utiliz\u00e1-los no texto, utilize as seguintes entidades:<\/p>\n\n\n\n\n\n\n
Entidade<\/strong><\/td>\nCar\u00e1cter<\/strong><\/td>\n<\/tr>\n
&lt;<\/td>\n<<\/td>\n<\/tr>\n
&gt;<\/td>\n><\/td>\n<\/tr>\n
&amp;<\/td>\n&<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

 <\/p>\n

Lista com acentos e s\u00edmbolos:<\/p>\n

 <\/p>\n\n\n\n
\u00c1 ………….. &Aacute;<\/span>\u00e1 …………… &aacute;<\/span><\/p>\n

\u00c2 …………….. &Acirc;<\/span><\/p>\n

\u00e2 ……………. &acirc;<\/span><\/p>\n

\u00c0 …………… &Agrave;<\/span><\/p>\n

\u00e0 …………… &agrave;<\/span><\/p>\n

\u00c5 …………….. &Aring;<\/span><\/p>\n

\u00e5 ……………. &aring;<\/span><\/p>\n

\u00c3 ……………. &Atilde;<\/span><\/p>\n

\u00e3 …………… &atilde;<\/span><\/p>\n

\u00c4 ……………… &Auml;<\/span><\/p>\n

\u00e4 …………….. &auml;<\/span><\/p>\n

\u00c6 …………….. &AElig;<\/span><\/p>\n

\u00e6 ……………… &aelig;<\/span><\/p>\n

\u00c9 ……………. &Eacute;<\/span><\/p>\n

\u00e9 …………… &eacute;<\/span><\/p>\n

\u00ca …………….. &Ecirc;<\/span><\/p>\n

\u00ea ……………. &ecirc;<\/span><\/p>\n

\u00c8 ……………. &Egrave;<\/span><\/p>\n

\u00e8 …………… &egrave;<\/span><\/p>\n

\u00cb ……………… &Euml;<\/span><\/p>\n

\u00eb …………….. &euml;<\/span><\/p>\n

\u00d0 ………………. &ETH;<\/span><\/p>\n

\u00f0 ……………… &eth;<\/span><\/td>\n

\u00cd ……………. &Iacute;<\/span>\u00ed …………… &iacute;<\/span><\/p>\n

\u00ce …………….. &Icirc;<\/span><\/p>\n

\u00ee ……………. &icirc;<\/span><\/p>\n

\u00cc ……………. &Igrave;<\/span><\/p>\n

\u00ec …………… &igrave;<\/span><\/p>\n

\u00cf ……………… &Iuml;<\/span><\/p>\n

\u00ef …………….. &iuml;<\/span><\/p>\n

\u00d3 ……….. &Oacute;<\/span><\/p>\n

\u00f3 ………….. &oacute;<\/span><\/p>\n

\u00d4 ……………. &Ocirc;<\/span><\/p>\n

\u00f4 …………….. &ocirc;<\/span><\/p>\n

\u00d2 ………….. &Ograve;<\/span><\/p>\n

\u00f2 …………… &ograve;<\/span><\/p>\n

\u00d8 ……………. &Oslash;<\/span><\/p>\n

\u00f8 …………… &oslash;<\/span><\/p>\n

\u00d5 ……………. &Otilde;<\/span><\/p>\n

\u00f5 …………… &otilde;<\/span><\/p>\n

\u00d6 ……………… &Ouml;<\/span><\/p>\n

\u00f6 …………….. &ouml;<\/span><\/td>\n

\u00da ………….. &Uacute;<\/span>\u00fa …………… &uacute;<\/span><\/p>\n

\u00db ……………. &Ucirc;<\/span><\/p>\n

\u00fb ……………. &ucirc;<\/span><\/p>\n

\u00d9 …………. &Ugrave;<\/span><\/p>\n

\u00f9 ………….. &ugrave;<\/span><\/p>\n

\u00dc …………….. &Uuml;<\/span><\/p>\n

\u00fc …………….. &uuml;<\/span><\/p>\n

\u00c7 …………… &Ccedil;<\/span><\/p>\n

\u00e7 …………… &ccedil;<\/span><\/p>\n

\u00d1 …………… &Ntilde;<\/span><\/p>\n

\u00f1 …………… &ntilde;<\/span><\/p>\n

< …………….. &lt;<\/span><\/p>\n

> …………….. &gt;<\/span><\/p>\n

& ……………. &amp;<\/span><\/p>\n

” …………….. &quot;<\/span><\/p>\n

\u00dd ………… &Yacute;<\/span><\/p>\n

\u00fd ………… &yacute;<\/span><\/p>\n

\u00de ………….. &THORN;<\/span><\/p>\n

\u00fe ……………. &thorn;<\/span><\/p>\n

\u00df ……………. &szlig;<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Lista com s\u00edmbolos comerciais:<\/p>\n\n\n\n\n\n\n\n\n\n\n
\u00a9<\/span><\/td>\ncopyright<\/span><\/td>\n&copy;<\/span><\/td>\n<\/tr>\n
\u00ae<\/span><\/td>\nmarca registrada<\/span><\/td>\n&reg<\/span><\/td>\n<\/tr>\n
\u2122<\/span><\/td>\ntrade mark<\/span><\/td>\n&trade;<\/span><\/td>\n<\/tr>\n
\u00a3<\/span><\/td>\nlibra esterlina<\/span><\/td>\n&pound;<\/span><\/td>\n<\/tr>\n
\u00a2<\/span><\/td>\ncentavo<\/span><\/td>\n&cent;<\/span><\/td>\n<\/tr>\n
\u20ac<\/span><\/td>\neuro<\/span><\/td>\n&euro;<\/span><\/td>\n<\/tr>\n
\u00a5<\/span><\/td>\niene (yen)<\/span><\/td>\n&yen;<\/span><\/td>\n<\/tr>\n
\u00a4<\/span><\/td>\ns\u00edmbolo monet\u00e1rio<\/span><\/td>\n&curren;<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

\u00c9 normal se deparar com caracteres estranhos, como \u00c3\u00a9, \u00c3\u00a3o ou  \u00c3\u00aa, ao escrever um texto em um ambiente online. Uma forma de resolver esse problema \u00e9 utilizar as listas de caracteres especiais ou, ainda melhor, declarar a meta tag charset no seu c\u00f3digo. Se voc\u00ea utiliza um gerenciador de conte\u00fados para atualizar seu site\/blog, isso provavelmente n\u00e3o ser\u00e1 […]<\/p>\n","protected":false},"author":253,"featured_media":8871,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[156],"tags":[1376],"class_list":["post-8869","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutoriais","tag-desenvolvimento"],"_links":{"self":[{"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/posts\/8869","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/users\/253"}],"replies":[{"embeddable":true,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/comments?post=8869"}],"version-history":[{"count":1,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/posts\/8869\/revisions"}],"predecessor-version":[{"id":31865,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/posts\/8869\/revisions\/31865"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/media\/8871"}],"wp:attachment":[{"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/media?parent=8869"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/categories?post=8869"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/tags?post=8869"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}