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 con hreflang 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 para lang="es-ES" (España) como para lang="es-419" (Latino América).
  • A diferencia con :lang(xyzzy) no coincidirá con lang="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.