Acerca de este problema HTML
El atributo lang en el elemento <html> establece el idioma predeterminado para todo el contenido de texto dentro de la página. Sin él, las tecnologías asistenciales como los lectores de pantalla tienen que adivinar en qué idioma está el contenido, lo que puede llevar a texto distorsionado o pronunciado incorrectamente. Por ejemplo, un lector de pantalla francés intentando leer texto en inglés — o viceversa — produce una experiencia pobre para usuarios que dependen de estas herramientas.
Más allá de la accesibilidad, el atributo lang importa por varias otras razones:
- Los motores de búsqueda lo usan para servir la versión del idioma correcto de tu página en los resultados de búsqueda.
- Los navegadores dependen de él para elegir fuentes apropiadas, reglas de separación silábica y estilos de comillas.
- Las herramientas de traducción lo usan para detectar el idioma fuente de la página.
-
Los selectores CSS como
:lang()dependen de él para aplicar estilos específicos del idioma.
El valor del atributo lang debe ser una etiqueta de idioma BCP 47 válida. Ejemplos comunes incluyen en (inglés), fr (francés), es (español), de (alemán), zh (chino), ja (japonés) y ar (árabe). También puedes ser más específico con subetiquetas de región, como en-US para inglés americano o pt-BR para portugués brasileño.
Si tu página contiene secciones en un idioma diferente al principal, puedes usar el atributo lang en elementos individuales para anular el idioma a nivel de documento para esa sección.
Ejemplos
Atributo lang faltante (desencadena la advertencia)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Page</title>
</head>
<body>
<p>Hello, world!</p>
</body>
</html>
Corregido con 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 una subetiqueta de región para especificidad
<!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>
Anulando el idioma para una sección 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>
En este último ejemplo, el idioma del documento es inglés, pero el segundo párrafo está marcado como francés. Un lector de pantalla cambiará a las reglas de pronunciación francesa para ese párrafo, luego volverá al inglés para el resto de la página.
Encuentra problemas como este automáticamente
Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.
Más información: