Sobre este problema HTML
O atributo lang no elemento <html> define o idioma padrão para todo o conteúdo de texto dentro da página. Sem ele, as tecnologias assistivas como os leitores de ecrã têm de adivinhar em que idioma o conteúdo está, o que pode levar a texto distorcido ou pronunciado incorretamente. Por exemplo, um leitor de ecrã francês a tentar ler texto em inglês — ou vice-versa — produz uma experiência pobre para utilizadores que dependem dessas ferramentas.
Além da acessibilidade, o atributo lang é importante por várias outras razões:
- Motores de busca usam-no para servir a versão do idioma correto da sua página nos resultados de pesquisa.
- Navegadores dependem dele para escolher fontes apropriadas, regras de hifenização e estilos de aspas.
- Ferramentas de tradução usam-no para detetar o idioma fonte da página.
-
Seletores CSS como
:lang()dependem dele para aplicar estilização específica do idioma.
O valor do atributo lang deve ser uma etiqueta de idioma BCP 47 válida. Exemplos comuns incluem en (inglês), fr (francês), es (espanhol), de (alemão), zh (chinês), ja (japonês), e ar (árabe). Também pode ser mais específico com sub-etiquetas de região, como en-US para inglês americano ou pt-BR para português brasileiro.
Se a sua página contém secções num idioma diferente do principal, pode usar o atributo lang em elementos individuais para substituir o idioma ao nível do documento para essa secção.
Exemplos
Atributo lang em falta (desencadeia o aviso)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Page</title>
</head>
<body>
<p>Hello, world!</p>
</body>
</html>
Corrigido com atributo lang
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Page</title>
</head>
<body>
<p>Hello, world!</p>
</body>
</html>
Usando uma sub-etiqueta de região para especificidade
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<title>My Page</title>
</head>
<body>
<p>Colour is spelt differently here.</p>
</body>
</html>
Substituindo o idioma para uma secção específica
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Multilingual Page</title>
</head>
<body>
<p>This paragraph is in English.</p>
<p lang="fr">Ce paragraphe est en français.</p>
</body>
</html>
Neste último exemplo, o idioma do documento é inglês, mas o segundo parágrafo está marcado como francês. Um leitor de ecrã mudará para as regras de pronúncia francesa para esse parágrafo, depois voltará ao inglês para o resto da página.
Encontre problemas como este automaticamente
O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.
Saiba mais: