Se abre en una pestaña nueva

Diseño web

Atributo lang de HTML: cómo indicar el idioma de una página y de sus partes

Qué hace el atributo lang, qué código de idioma usar, cómo marcar las partes en otro idioma y por qué Google no lo usa para detectar el idioma.

Revisada5 de noviembre de 2026
Lectura
Forma parte deDiseño web
Escucha esta guía
0:00 /8:08

Respuesta corta: pon lang en el elemento html con el idioma de la página, como lang="es" o lang="en", y añade lang a cualquier parte escrita en otro idioma. El lector de pantalla lo usa para pronunciar bien el texto. Google no lo tiene en cuenta para saber el idioma; las anotaciones hreflang le ayudan a enlazar las versiones de idioma.

Qué hace el atributo lang

MDN describe lang como el atributo que ayuda a definir el idioma de un elemento. Contiene una sola etiqueta de idioma BCP 47, como en, es o es-419. Cuando nada indica el idioma, este queda desconocido, y MDN recomienda indicarlo siempre, sobre todo por accesibilidad.

Las WCAG piden los dos niveles: el criterio 3.1.1 para el idioma de la página y el 3.1.2 para las partes en otro idioma. El W3C explica el motivo: así el lector de pantalla puede cargar las reglas de pronunciación correctas. Nuestra guía del lector de pantalla muestra cómo lo usa la gente.

Dónde va lang

Caso Qué escribir Por qué
La página entera lang en el elemento html, como lang="es" Todos los elementos lo heredan, también el head
Una parte en otro idioma lang en su elemento, como lang="en" en un título El lector de pantalla cambia la pronunciación
Un menú de idiomas lang en el nombre de cada idioma Cada nombre se lee en su propio idioma
Otra versión de idioma Anotaciones hreflang, no lang Google las usa para enlazar la versión correcta

De MDN, del W3C y de Google Search Central, consultados el 5 de noviembre de 2026.

Para la página, la regla del W3C es usar siempre un atributo de idioma en la etiqueta html. Avisa contra el elemento body, que no cubre el texto del head, y dice que nunca se declare el idioma de la página con un elemento meta y Content-Language.

Un elemento sin lang lo hereda de su padre, así que el resto de la página no necesita nada. El propio menú de idiomas de MDN pone lang en cada entrada, para que el lector de pantalla pronuncie English con las reglas del inglés.

Qué código de idioma usar

El W3C lo llama la regla de oro: que la etiqueta de idioma sea lo más corta posible. En la mayoría de las páginas eso son dos letras, es para el español y en para el inglés.

Detrás del idioma va una región solo si aporta información que necesitas. Los ejemplos del W3C son es-ES para el español de España y es-419 para el español de América Latina.

Partes en otro idioma

El criterio 3.1.2 de las WCAG pide que se pueda identificar cada pasaje o frase en otro idioma. Las excepciones son los nombres propios, los términos técnicos, las palabras de idioma indeterminado y las que ya forman parte del idioma de alrededor.

La prueba del W3C para los casos dudosos: ¿la palabra sonaría igual, salvo el acento, en el idioma que la rodea? Un título de libro en inglés en una página en español no suena igual, así que lleva lang="en". Una palabra prestada como rendezvous en inglés sí suena igual, así que no necesita nada.

Qué hace lang por la búsqueda

Google deduce el idioma del texto que la gente ve en la página. Para eso no tiene en cuenta los atributos lang ni la URL, según su documentación, y recomienda un solo idioma en el contenido y la navegación de cada página.

Para conectar las versiones de una página en distintos idiomas, Google usa las anotaciones hreflang, que trata nuestra guía de hreflang. Si vas a hacer una versión en español, nuestra guía para traducir tu web al español tiene el plan completo.

Cómo indicar el idioma de una página

  1. Pon lang en el elemento html con el idioma principal de la página.
  2. Que la etiqueta sea corta: es o en, más una región solo si aporta información.
  3. Dale a cada versión de idioma de la página su propio lang.
  4. Añade lang a cualquier cita, título o frase escrita en otro idioma.
  5. Deja sin lang los nombres propios, los términos técnicos y las palabras prestadas.
  6. En un menú de idiomas, pon lang en el nombre de cada idioma.
  7. Enlaza las versiones de idioma con hreflang, porque lang no hace ese trabajo.

Qué encontramos en nuestras páginas

El 5 de noviembre de 2026 leímos el idioma de tres páginas en cada versión de nuestra web: la de inicio, la de contacto y nuestra guía de navegación con teclado. Cada una lo declara en su elemento html: en-US para el inglés y es-US para el español, con la región porque escribimos las dos versiones para lectores de Estados Unidos.

Con las partes era distinto. Nuestras guías en español citan muchas fuentes en inglés, y sus títulos no tenían lang propio: heredaban el español de la página, así que una voz en español los leería con sonidos españoles. Los marcamos con lang="en": 263 títulos en 101 guías en español. Los títulos que la propia fuente da en español, como los de web.dev, se quedan como estaban.

El aspecto apenas cambió. El navegador muestra el texto en inglés con reglas inglesas, lo que movió algunos títulos cerca de un píxel, y no cambió ninguna línea ni la altura de ninguna página.

Antes de publicar

  • El elemento html lleva el idioma de la página.
  • La etiqueta es válida y lo más corta posible.
  • Los títulos y las citas en otro idioma llevan su propio lang.
  • Los nombres propios y los términos técnicos no llevan ninguno.
  • Cada nombre del menú de idiomas lleva su propio lang.
  • Cada versión de idioma enlaza las demás con hreflang.

Recuerdalang es para las personas y los programas que leen la página. Ponlo una vez para la página, otra en cada parte en otro idioma, y deja las versiones de idioma a hreflang.

Hacemos páginas bilingües como estas en nuestro servicio de diseño web.

Respuestas rápidas sobre el atributo lang

¿Qué hace el atributo lang?

Les dice al navegador y a las tecnologías de apoyo en qué idioma está escrito un elemento. Según el W3C, así el lector de pantalla carga las reglas de pronunciación correctas, y una voz en español no lee un título en inglés como si fuera español.

¿Qué código de lang uso para el español?

Normalmente basta con es. La regla de oro del W3C es que la etiqueta sea lo más corta posible. Añade una región solo si aporta algo que necesitas, como es-419 para el español de América Latina o es-ES para el de España.

¿Google usa el atributo lang?

No para saber el idioma. Google lo deduce del texto que se ve y, según su documentación, no usa los atributos lang para eso. Para indicarle cada versión de idioma, usa las anotaciones hreflang.

¿Necesito lang en cada elemento?

No. Un elemento sin lang hereda el idioma de su padre, como explica MDN, así que un solo lang en el elemento html cubre la página. Vuelve a ponerlo solo en una parte escrita en otro idioma.

¿Qué diferencia hay entre lang y hreflang?

lang describe el idioma del texto que tienes delante. hreflang les dice a los buscadores el idioma de otra versión de la página, para que la Búsqueda de Google lleve a cada lector a la versión en su idioma.

Fuentes

Consultadas el 5 de noviembre de 2026. W3C Internacionalización: Declarar idioma en HTML y Selección de una etiqueta de idioma. Google Search Central: Cómo administrar sitios multilingües y multirregionales. En inglés: MDN Web Docs, lang HTML global attribute; Iniciativa de Accesibilidad Web del W3C, Understanding Success Criterion 3.1.1: Language of Page y Understanding Success Criterion 3.1.2: Language of Parts. Nuestro caso: nuestras propias páginas, leídas en un navegador el 5 de noviembre de 2026.

Pedro Galindez

Pedro Galindez

Fundador de Feedback Studios, estudio de crecimiento bilingüe en Miami.

Escuchar0:00 /8:08

Más guías

Revisada 5 de noviembre de 2026

Texto oculto visualmente (sr-only): cómo dejar contenido solo para el lector de pantalla

Qué hacen las clases sr-only y visually-hidden, cuándo ocultar un texto solo en pantalla, qué técnicas de CSS funcionan y por qué los enlaces deben aparecer con el foco.

Revisada 5 de noviembre de 2026

aria-describedby: cómo añadir una descripción que anuncie el lector de pantalla

Qué hace aria-describedby, en qué se diferencia de un nombre, cómo anuncia el lector de pantalla las descripciones y cómo avisar de los enlaces a pestaña nueva.

Revisada 5 de noviembre de 2026

Tabindex: cómo usar 0 y -1 sin romper el orden de tabulación

Qué hacen los valores 0, -1 y positivos de tabindex, cuándo encaja cada uno, por qué los positivos rompen el orden y cómo funciona el tabindex itinerante.

Revisada 3 de noviembre de 2026

llms.txt: qué es y si lo necesitas

Qué lleva un archivo llms.txt, qué dice Google de él, quién lo lee, cómo escribirlo y qué contiene el nuestro.

Revisada 3 de noviembre de 2026

Rastreada, actualmente sin indexar: qué significa y qué hacer

Qué significan «Rastreada» y «Descubierta: actualmente sin indexar», cuándo no pasa nada, los pasos a seguir y lo que pasó con nuestras páginas.

Siguiente paso

Cuéntanos qué necesitas

Escríbenos por WhatsApp o envíanos un mensaje. Respondemos en español o en inglés.