charset meta tag - Caracteres especiais em HTML - Como escrever com acento agudo, til, circunflexo, outros símbolos e acentuação

Curso de HTML online grátisTente escrever um site simples em HTML, que mostra os seguintes textos na tela:
"HTML Progressivo é uma apostila online."
"Os cursos da rede Progressivo são muito bons."
"Estou estudando com eficiência."

Verá algumas coisas estranhas, uns símbolos estranhos e sem sentido.

Neste artigo de nossa apostila online e gratuita de HTML iremos explicar o motivo de isso ocorrer e como escrever certo em HTML, além de aprendermos a usar outra meta tag, a charset.

Acentuação errada em HTML

Que entrar no Mercado de Trabalho como Webmaster? Clique aqui e obtenha seu certificado!

Teste o que pedimos no início desta aula de nosso curso de HTML, crie um simples código HTML que exiba aquelas frases.

É importante que você sempre faça os exemplos de nosso curso, nunca e em hipótese alguma fique copiando e colando nossos códigos, do contrário nunca aprenderá.

Certamente o ideal é tentar sempre escrever todo o código HTML, na mão, para se tornar um excelente profissional de HTML e webmaster.

Mas vamos ao código:


<!DOCTYPE html>
 
<html>
	<head>
  		<title> Acentos ortográficos em HTML </title>
		<meta name="description" content="Resultado de caracteres com acentos ortográfico em um site HTML">
	</head>
 
	<body>
		"HTML Progressivo é uma apostila online." <br />
		"Os cursos da rede Progressivo são muito bons."<br />
		"Estou estudando com eficiência."
	</body>

</html>

Você verá que o resultado é bem inesperado, e aparentemente deu errado, como se tivéssemos cometido algum erro em nossa codificação, veja o que sai:
"HTML Progressivo é uma apostila online."
"Os cursos da rede Progressivo são muito bons."
"Estou estudando com eficiência."

Em vez de 'é' aparece é
Em vez e 'são' aparece são
Em vez de 'eficiência' apareceu eficiência

Bizarro não?
Mas calma, pois em HTML (e no mundo da computação e programação, de um modo geral), tudo tem um sentido e motivo.
E geralmente são razões bem sensatas.

Antes de finalizar estação sobre como escrever textos em sites HTML, iremos explicar o motivo de tudo isso, bem como escrever acentos e outros símbolos de maneira correta quando for criar seu site.

Caracteres e Símbolos especiais em HTML

Você sabia na língua inglesa, usada nos Estados Unidos, por exemplo, não se usa acento agudo, til (~), circunflexo (^), crase(`), cedilha (ç) e outros caracteres bem comuns na língua portuguesa?

E aquelas lestras japonesas ? Os símbolos usados na língua chinesa? Árabe?
Enfim, existem muitas e muitas linguagens, e consequentemente muitos tipos de caracteres diferentes, e isso cria um certo tipo de 'problemas' no mundo da computação.

Por exemplo, quando as linguagens de programação começaram a ser desenvolvidas em inglês, obviamente eles se preocuparam somente com a língua inglesa. Mas e quando foi necessário escrever em português?
E os japoneses, precisariam aprender sempre inglês para poder escrever e programar ?

Essas coisas foram resolvidas aos poucos, e hoje em dia temos os navegadores tem suporte a um vasto número de caracteres, das mais diferentes línguas, e essa foi uma característica bem marcante do HTML: ir se adaptando ao que o mundo pedia.

E o que acontece com os exemplos que citamos é bem simples de entender: o HTML não vai, por padrão, entender todo e qualquer caractere, dos milhões possíveis, que o usuário vai digitar. E não é só com o HTML, as linguagens de programação, de uma maneira geral, também não vão entender os vários símbolos existentes nos infinitos cantos do mundo.

Mas, obviamente, isso tem uma solução. Senão você não estaria lendo este tutorial de nossa apostila, repleto de acentos ortográficos. No outro site de nosso rede de cursos, o Eletrônica Progressiva, usamos bastante símbolos matemáticos, como de integral, por exemplo.

Ou seja, é possível exibir esses vários tipos de acentuação e símbolos em nossos sites HTML e é o que vamos ensinar agora.

Há, basicamente, duas maneiras: usando códigos especiais para cada tipo de símbolo ou usando a meta tag charset.




Códigos especiais de acentos e símbolos

A primeira maneira na qual é possível usar esses símbolos e acentos na criação de nossos sites em HTML é através de códigos especiais. Como você já está criando e codificando em HTML, certamente não teme mais os códigos.
E se teme, trate-se de se acostumar, afinal você já é um webmaster :)

Mas vamos aos códigos. Mas antes, vamos ter algumas aulas de inglês, mas relaxe, são coisas bem simples e você vai ver como saber inglês nos ajuda a entender mais facilmente as coisas em HTML, aliás, não só em HTML, mas saber inglês é muito importante para se estudar programação e computação. http://www.programacaoprogressiva.net/2012/07/melhor-e-mais-importante-linguagem-de.html

A palavra agudo, de acento agudo, em inglês é 'acute'.
Já o til (~), em inglês é 'tilde'.
O trema, esses dois pontinhos em cima da letra (ü), é 'umlaut'.
E circunflexo (^) é 'circumflex'.
Pronto, isso vai nos ajudar com os códigos.

Para colocar o acento agudo na letra 'e', fazemos: &eacute;
Para colocar o acento til na letra 'a', fazemos: &atilde;
E para colocar o acento circunflexo no'e' fazemos: &ecirc;

Ou seja, no lugar do caractere que queremos colocar a acentuação, substituímos pelo código.
Por exemplo, a palavra "são" se torna "s&atilde;o"
Já a palavra "eficiência" se torna "efici&ecirc;ncia"

Veja agora como seria nosso código de maneira correta, mostrando os caracteres de acentuação de maneira perfeita e correta:

<!DOCTYPE html>
 
<html>
	<head>
  		<title> Acentos ortográficos em HTML </title>
		<meta name="description" content="Símbolos de acentos em HTML">
	</head>
 
	<body>
		"HTML Progressivo &eacute; uma apostila online." <br>
		"Os cursos da rede Progressivo s&atilde;o muito bons."<br>
		"Estou estudando com efici&ecirc;ncia."
	</body>

</html>

Ao final deste tutorial de nosso curso de HTML iremos mostrar uma tabela com dezenas de códigos para os mais diversos tipos de símbolos e acentuação.

Ok, assumimos, não é nada legal sair decorando códigos por aí, ainda mais existindo tanto. Mas usando o inglês, já aprendemos automaticamente vários.

Mas não precisa se preocupar, se você usar um editor de HTML, basta escrever normalmente e ele automaticamente vai inserindo os códigos nos locais corretos. Para escrever neste blog, por exemplo, eu escrevo sem preocupações, pois na hora que publico o artigo o Blogger automaticamente substituir os símbolos pelos seus respectivos códigos especiais.

Mas esta aula foi mais para seu conhecimento, para você saber como as coisas funcionam e se tornar um webmaster muito competente. Na próxima seção iremos mostrar como não se preocupar com esses códigos, usando a meta tag charset, que vai dizer ao seu navegador como ela deve interpretar esses símbolos diferentes.

charset <meta> tag: O que é, para que serve e como usar

Através do uso da meta tag charset, vamos poder dizer ao navegador do usuário que tipo de codificação de caracteres que deve ser usado.

Assim, você escreve normalmente em seu site HTML, e se o navegador vai exibir os símbolos e acentuação correta, vai depender do navegador do usuário. É como se seu site conversasse com o navegador do usuário: "Hey HTML, como devo interpretar esses caracteres especiais? Ah ok, vi sua meta tag charset, meu usuário é do Brasil e está lendo em português, então agora sei que devo exibir os acentos agudos, til, circunflexo etc".

O tipo de codificação que vamos usar é Unicode, o utf-8, que é um padrão muito usado, muito bom e funcional.
Para saber mais sobre o utf e codificação Unicode, veja o excelente artigo da Wikipedia:
http://pt.wikipedia.org/wiki/UTF-8

E para usar ela, faremos uso do atributo http-equiv, que já usamos aqui em nosso curso de HTML quando ensinamos como recarregar e redirecionar páginas em HTML.

A sintaxe para definir o utf-8, usando a <meta> tag é:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

É esse modelo que iremos usar durante nossa apostila de HTML, porém não é a única maneira de se fazer isso.
Você pode usar diretamente da seguinte maneira, sintaxe do HTML 5:
<meta charset="utf-8">

Como estamos focando no HTML padrão, antes de partir e ensinar coisas sobre o HTML 5, iremos usar a primeira opção durante boa parte de nossos tutoriais.
E como estamos careca de saber, por ser uma meta tag, esse código vai no <header> de nosso site HTML.
Colocando isso, não precisamos mais nos preocupar com os códigos especiais dos símbolos.

Veja como fica nosso código de HTML para o que propomos no início:

<!DOCTYPE html>
 
<html>
	<head>
  		<title> Usando charset utf-8 em HTML </title>
		<meta name="description" content="Como usar charset na <meta> tag">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	</head>
 
	<body>
		"HTML Progressivo é uma apostila online." <br>
		"Os cursos da rede Progressivo são muito bons."<br>
		"Estou estudando com eficiência."
	</body>

</html>

Teste e veja como o resultado é perfeito e exatamente do jeito que esperávamos que fosse.
Teste e use a maneira HTML 5.
A partir de agora, usaremos sempre a meta tag com charset utf-8 nos códigos de nosso curso.

Tabela de códigos especiais e mais fontes de estudo

A seguir, vamos deixar uma série de links onde você poderá consultar tabelas de códigos especiais, de símbolos e acentos ortográficos:
http://www.itmnetworks.com.br/suporte/acentuacao_e_caracteres_especiais.php
http://wiki.locaweb.com.br/pt-br/C%C3%B3digos_HTML_para_caracteres_acentuados
http://www.dm.ufscar.br/~waldeck/curso/html/apend/tabcod.html
http://www.ime.usp.br/~glauber/html/acentos.htm

Para estudar e se informar sobre o que vimos nessa aula, indicamos os seguintes links:
http://en.wikipedia.org/wiki/Character_encodings_in_HTML
http://www.w3schools.com/tags/att_meta_charset.asp
http://pt.wikipedia.org/wiki/UTF-8

6 comentários:

Orion disse...

Meu texto aparecia normalmente na tela, mas quando adicionei a meta tag para definir o padrão utf-8 todas as letras acentuadas foram substituídas por pontos de interrogação.
Uso o Google Chrome.
Acho que não é mais necessário inserir esta configuração para os navegadores atuais.

Anônimo disse...

No meu aconteceu o mesmo, Orion.

Isac Moura disse...

Sempre esqueço esse código, obrigado!

Anônimo disse...

O meu ficou normal

Aqui Você Tem disse...

Depende do tipo do navegador, pois existe empresas e pessoas que usam navegadores antigos, que não aceita charset=utf-8. Aí tenho que usar o código "meta http-equiv="Content-Type" content="text/html; charset=utf-8". Eu acredito que seja a versão antiga do navegadores.

Aqui Você Tem disse...

Geralmente quando se usa navegadores antigos, tem que usar a tag meta http-equiv="Content-Type" content="text/html; charset=utf-8". Lá na empresa onde eu trabalho, os navegadores não aceita a tag meta charset="utf-8".