Desenvolvimento - HTML

Como declarar idiomas no seu código html

Veja neste artigo como tornar o seu website mais acessível declarando o idioma dele no código html.

por Ricardo Arrigoni


Olá pessoal, no artigo de hoje vou mostrar como declarar idiomas em seu código HTML. Fazer essas declarações é muito importante em questões de acessibilidade, otimização, entre outros.

Com essa declaração o seu site fica mais acessível à pessoas deficientes que acessam por leitores de tela, ajuda os buscadores a posicionarem o site de acordo com seu idioma(por exemplo: sites em inglês são posicionados no Google americano), além de que facilitar no uso do dicionário correto para correção gramatical nativa dos browsers.

Definindo o idioma padrão do documento

Existem algumas maneiras que você pode definir o idioma padrão no documento exibido ou em partes do texto para aqueles termos em idiomas diferentes. Essa definição pode ser feita de algumas formas, como por exemplo:

Listagem 1: Definindo diretamente via metatag nativa

<meta http-equiv="Content-Language" content="pt-br">

Listagem 2: Definindo vários valores no atributo content

<meta http-equiv="Content-Language" content="pt-br, en, fr, it">

Listagem 3: Definindo Via HTTP Header

HTTP/1.1 200 OK
Date: Fri, 30 Dez 2011 10:46:04 GMT
Server: Apache/1.3.28 (Unix) PHP/4.2.3
Content-Location: CSS2-REC.en.html
Vary: negotiate,accept-language,accept-charset
TCN: choice
P3P: policyref=http://www.w3.org/2001/05/P3P/p3p.xml
Cache-Control: max-age=21600
Expires: Wed, 05 Nov 2003 16:46:04 GMT
Last-Modified: Tue, 12 May 1998 22:18:49 GMT
ETag: "3558cac9;36f99e2b"
Accept-Ranges: bytes
Content-Length: 10734
Connection: close
Content-Type: text/html; charset=utf-8
Content-Language: pt-br

Listagem 4: Definindo via atributo lang nos elementos do HTML

<p>O <span lang="en">teclado</span> é muito útil para escrever artigos na <span lang="en">web</span> por meios dos <span lang="en">browsers</span>.

Dessa forma, os leitores de tela conseguem identificar quais elementos ele precisa ler com idioma nativo.

É importante ter o costume de indicar o atributo lang no elemento html logo no início do site para indicar que todo o conteúdo contido dentro do html está escrito em um determinado idioma.

Listagem 5: Indicando atributo Lang

<html lang="pt-br">
<head>
  <title>Indicando atributo lang</title>
</head>
<body>
</body>
</html>

Ordem de herança

Para identificar o idioma, os browsers precisam seguir alguns passos de verificação, esses passos são:

  1. Verifica se elemento HTML que tem o atributo lang, se não,
  2. Verifica se pai mais próximo ao termo que tenha o atributo lang, se não,
  3. Verifica se o documento tem a metatag definida , se não,
  4. Verifica se o HTTP Header Content-Language tem uma tag de idioma definido. Se não,
  5. O idioma é tratado como não reconhecido.

Utilizar o lang é o mais indicado, inclusive sendo recomendado pelo W3C.

Aos poucos, características que antes eram ignoradas no desenvolvimento web, agora são padronizadas e utilizadas.

Quer aprender HTML?

Espero que tenham gostado e até o próximo artigo. Ricardo Arrigoni - SEO Consultant.
Ricardo Arrigoni

Ricardo Arrigoni - Especialista em SEO com mais de 7 anos de experiência. Para consultorias em SEO visite meu site: www.ricardoarrigoni.com.