Guia dos Atributos lang e dir do HTML para SEO e Acessibilidade

Aprenda a usar os atributos lang e dir na tag <html>. Entenda por que declarar o idioma e a direção do texto é crucial para SEO e acessibilidade (a11y).

Os atributos lang e dir na tag <html> são declarações fundamentais que definem o idioma e a direção do texto de uma página. Embora simples, eles são cruciais para a acessibilidade (a11y), SEO e para garantir que os navegadores renderizem seu conteúdo corretamente.

O Atributo lang

O atributo lang especifica o idioma principal do conteúdo de uma página web.

Sintaxe:

<html lang="pt-BR">

Por que o lang é tão importante?

  • Acessibilidade (a11y): É a razão mais crítica. Leitores de tela usam o atributo lang para carregar o perfil de pronúncia correto. Sem ele, um leitor de tela pode tentar ler um texto em português com as regras de pronúncia do inglês, tornando o conteúdo incompreensível.
  • SEO: Ajuda os mecanismos de busca a entender o idioma da sua página, permitindo que eles entreguem seu conteúdo para usuários que buscam naquele idioma específico. Ele trabalha em conjunto com as tags hreflang para estratégias de SEO internacional.
  • Funcionalidade do Navegador: Influencia funcionalidades como a oferta de tradução, a verificação ortográfica e o uso correto de hifenização.

O valor do atributo deve seguir o padrão de códigos de idioma ISO 639-1 (ex: "pt" para português, "en" para inglês), opcionalmente seguido por um hífen e um código de região ISO 3166-1 Alpha 2 (ex: "BR" para Brasil, "US" para Estados Unidos).

O Atributo dir

O atributo dir especifica a direcionalidade do texto da página.

Sintaxe e Valores:

  • <html lang="pt-BR" dir="ltr">: Para idiomas "Left-to-Right" (da esquerda para a direita), como Português, Inglês e Espanhol.
  • <html lang="ar" dir="rtl">: Para idiomas "Right-to-Left" (da direita para a esquerda), como Árabe, Hebraico e Persa.

Por que o dir é importante?

A direcionalidade do texto afeta a renderização de todo o layout. Navegadores usam o atributo dir="rtl" para, por exemplo, alinhar o texto à direita, inverter a ordem das colunas em uma tabela e posicionar barras de rolagem no lado esquerdo. É essencial para a correta experiência do usuário em idiomas RTL.

Boas Práticas

  • Sempre Declare: A tag <html> deve sempre ter um atributo lang.
  • Seja Específico: Prefira códigos de idioma com região (ex: pt-BR) em vez de apenas o idioma (pt) quando seu conteúdo é geo-direcionado.
  • Use em Elementos Específicos: Se um trecho da sua página estiver em um idioma diferente, você pode e deve adicionar um atributo lang à tag que o contém.

Exemplo de uso em um elemento:

<p>No mundo do desenvolvimento, é comum usar o termo em inglês <span lang="en">"user experience"</span>.</p>

Para mais detalhes técnicos, consulte a documentação oficial da MDN sobre o atributo lang.