El Atributo LANG

El atributo Lang: Especifica el idioma del contenido en un Elemento HTML.Referencia de su Descripción,Aplicación y Uso del atributo en los elementos HTML.
El atributo lang
en HTML especifica el idioma del contenido de un documento o elemento. Es esencial para accesibilidad, SEO y la correcta interpretación del texto por navegadores y herramientas de asistencia. Aquí una guía completa:
¿Qué es el atributo lang
?
Propósito: Indica el idioma principal del contenido (ej: español, inglés, francés).
Beneficios:
-
Mejora la accesibilidad para lectores de pantalla.
-
Ayuda a los motores de búsqueda a indexar correctamente el contenido.
-
Permite a los navegadores mostrar caracteres especiales o direcciones de texto (ej: árabe RTL).
Sintaxis Básica
El atributo se aplica en la etiqueta <html>
para el idioma global o en elementos específicos:
HTML:
<!-- Idioma global --> <html lang="es"> <!-- Contenido en español --> </html> <!-- Elemento con idioma distinto --> <p lang="en">This text is in English.</p>
Códigos de Idioma (ISO 639-1)
Código | Idioma | Ejemplo |
---|---|---|
es |
Español | <html lang="es"> |
en |
Inglés | <p lang="en">Text</p> |
fr |
Francés | <div lang="fr">...</div> |
ar |
Árabe | <html lang="ar" dir="rtl"> (texto derecha a izquierda) |
Nota: Para dialectos, usa códigos de país (ISO 3166-1):
-
es-MX
(Español de México). -
en-US
(Inglés estadounidense).
Casos de Uso Prácticos
Ejemplo 1: Documento multilingüe
HTML:
<html lang="es"> <head>...</head> <body> <h1>Artículo en español</h1> <!-- Cita en inglés --> <blockquote lang="en"> "The only way to do great work is to love what you do." – Steve Jobs </blockquote> </body> </html>
Ejemplo 2: Sitio con soporte para árabe
HTML:
<html lang="ar" dir="rtl"> <body> <h1>مرحبا بكم</h1> <!-- "Bienvenidos" en árabe --> <p>هذا مثال للنص العربي.</p> </body> </html>
Importancia para la Accesibilidad
-
Lectores de pantalla: Usan
lang
para cambiar la pronunciación según el idioma. -
Navegación por voz: Herramientas como VoiceOver detectan el idioma para comandos.
Ejemplo de error sin lang
:
Un lector de pantalla podría leer texto en francés con reglas de pronunciación en inglés si falta el atributo.
Beneficios para SEO
-
Indexación precisa: Google prioriza contenido en el idioma del usuario.
-
Evita contenido duplicado: Si tienes versiones en varios idiomas, usa
lang
junto conhreflang
en el<head>
.
HTML:
<head> <link rel="alternate" hreflang="es" href="https://ejemplo.com/es/"> <link rel="alternate" hreflang="en" href="https://ejemplo.com/en/"> </head>
Buenas Prácticas
Define el idioma global: Siempre incluye lang
en <html>
.
Marca cambios de idioma: Si una sección usa otro idioma, añade lang
al elemento contenedor.
Usa códigos correctos: Consulta la lista de ISO 639-1.
Combina con dir
para direcciones de texto:
<p lang="he" dir="rtl">זהו טקסט בעברית</p> <!-- Hebreo (derecha a izquierda) -->
Herramientas de Validación
-
W3C Validator: Verifica el uso correcto de
lang
y otros atributos. -
Lighthouse (Chrome DevTools): Evalúa accesibilidad y SEO.
-
Screen Readers: Prueba con NVDA, JAWS o VoiceOver para asegurar pronunciación correcta.
Errores Comunes
Error 1: Omitir el atributo global
HTML:
<!-- Incorrecto --> <html> <body>...</body> </html> <!-- Correcto --> <html lang="es"> <body>...</body> </html>
Error 2: Códigos incorrectos
HTML:
<!-- Incorrecto: "sp" no es un código válido --> <html lang="sp">...</html> <!-- Correcto --> <html lang="es">...</html>
Conclusión
El atributo lang
es crucial para crear sitios web accesibles, SEO-friendly y técnicamente correctos. Al implementarlo adecuadamente, garantizas una experiencia óptima para usuarios y motores de búsqueda. ¡No subestimes su impacto!
El atributo lang
establece el idioma de cualquier Elemento HTML, tanto para los elementos no editables, como para a los elementos editables por el usuario, es decir, los "campos de entrada". La etiqueta debe contener una único "código de idioma" en el formato que se define en el estándar de idiomas establecido para el documento y/o plataforma. Ya sea, ISO 639-1, BCP47 de la IETF, etc.
Algunos ejemplos de estos "códigos de idioma" son:
"en"
para el Ingles,"es"
para el Español ó"fr"
para el Frances.
Un ejemplo de como definir un Párrafo con texto establecido en Frances:
<p lang="fr">Ceci est un paragraphe.</p>
Comportamiento
- El valor predeterminado de este atributo es desconocido.
- Si el valor de este atributo es vacío como
lang=""
, el idioma se establece también como desconocido. - Si el valor de este atributo no corresponde a un "código de idioma", el idioma se establece como inválido.
Este último punto, por supuesto que, es con respecto al estándard de idiomas establecido para el documento y/o plataforma.
XML
Incluso si el atributo lang
está establecido correctamente con un "código de idioma", puede que no se tome en cuenta, ya que el atributo xml:lang
tiene mayor prioridad. Leer el algoritmo para determinar el idioma del contenido de un elemento para ver como es establecido el idioma en todos y cada uno de los casos.
CSS
Para la pseudoclase CSS :lang
, dos nombres de idiomas diferentes son inválidos, a excepción de que exista la compatibilidad explícita por parte de los Navegadores Web y/o Plataformas en donde se aplica, por ejemplo:
- Mientras
:lang(es)
si coincide tanto paralang="es-ES"
(España) como paralang="es-419"
(Latino América). - A diferencia con
:lang(xyzzy)
no coincidirá conlang="xyzzy-Zorp!"
.
Referencia Externa: Soporte Google para los Idiomas Compatibles.
Aplicación
El atributo lang
es un Atributo Global, así, este atributo puede ser usado en cualquier Elemento HTML.
Referencia
Referencia | Descripción |
---|---|
Códigos de Idioma | Referencia a la definición, sintaxis y listado de los códigos de idioma para el HTML. |
Códigos de País | Referencia a la definición, sintaxis y listado de los códigos de Países para el HTML. |