El atributo lang, del inglés language (idioma), es utilizado para indicar el idioma del contenido de un elemento:

En elementos no editables indica el idioma en el que está escrito el texto.
En elementos editables (incluyendo elementos con atributo contenteditable) indica el idioma en el que debería introducirse el texto.

Aunque es un atributo global y se puede utilizar en cualquier elemento HTML, las especificaciones HTML 5.1 establecen que el atributo lang solo tiene efecto sobre elementos que contengan texto. Esto quiere decir que en elementos que no contienen texto el atributo lang es válido pero no tiene efecto.

Ayuda a definir el idioma de un elemento: el idioma en el que se encuentran los elementos no editables o el idioma en el que el debe escribir los elementos editables. El atributo contiene una "etiqueta de idioma" (hecha de "subetiquetas de idioma" separadas por guiones) en el formato definido en Etiquetas para identificar idiomas (B47) . xml: lang tiene prioridad sobre él.

¿Cómo se utiliza?

Utilizar el atributo lang es muy sencillo. Cómo cualquier otro atributo, se incluye en la etiqueta del elemento y se utiliza = para asignarle un valor. Por ejemplo:

<p lang="es">Contenido del párrafo.</p>

El valor del atributo lang se rige por el documento B47 de la IETF y debe ser una cadena que contenga un identificador de idioma según el estándar ISO 639. Hay dos versiones de este estándar, ISO 639-1 e ISO 639-2, para idiomas que tengan las dos versiones, se elige la versión más corta, generalmente la ISO 639-1.

Por ejemplo, el español es spa en ISO 639-2 y es en ISO 639-1; se utiliza es. Algo similar ocurre con el inlgés, su código ISO 639-2 es eng y se utiliza la versión ISO 639-1, que es en.

<p lang="en">No! Don't jump! Is the Space Pope reptilian!? I've been there. My folks were always on me to groom myself and wear underpants.</p>

El atributo lang se puede utilizar en elementos anidados para especificar un idioma diferente al idioma del elemento padre. Por ejemplo, se puede utilizar en el elemento <html> para identificar el idioma de toda la página y luego podemos especificar idiomas diferentes en elementos internos:

<!doctype html>
<html lang="es">
....
<body>
    <p>Esta página esta escrita en español.</p>
    <p lang="en">But this paragraph is written in english.</p>
    <p>Customizar, del inglés <span lang="en">customize</span>, que significa personalizar.</p>
</body>
</html>

Además, se pueden componer identificadores específicos para variantes de idioma, generalmente variantes regionales. Basta con utilizar el código ISO 639-1 o 2, que se conoce como la «etiqueta de idioma», seguido de un guión - y luego el identificador de variante, que se conoce como «subetiqueta de idioma». La lista de subetiquetas es mantenida en el registro de subetiquetas de idioma de IANA(Internet Assigned Numbers Authority).

{etiqueta ISO 639-1/2}-{subetiqueta IANA}

Por ejemplo, es-ES sería para el español de España, en-GB para el inglés de Reino Unido y fr-CA para el francés de Canadá.

<!doctype html>
<html lang="es-ES">
....
<body>
    <p>Esta página esta escrita en español de España.</p>
</body>
</html>

El atributo Hreflang marcado está diseñado para los sitios web que sirven a los s de todo el mundo con el contenido traducido o destinado para los s en una determinada región. Google utiliza el atributo rel = "alternate" hreflang = "x" atribuye a servir al idioma o la URL regional en los resultados de búsqueda. Si marca sus páginas correctamente, puede confundir a Google, y ahora Google es el envío de un gran conjunto de esas notificaciones.

Ejemplo:

Elemento de enlace HTML en el encabezado. En la sección <head> del HTML de la página www.example.com/, añade un elemento de enlace link que dirija a la versión en español de esta página web en la URL es.example.com/, tal como se indica a continuación:

<link rel="alternate" hreflang="es" href="https://es.example.com/" />

<link rel="alternate" hreflang="es" href="https://example.com/es" />

Encabezado HTTP. Si publicas archivos no HTML (como PDF), puedes usar un encabezado HTTP para indicar que existe una versión en otro idioma de una URL:

Link: <https://es.example.com/>; rel="alternate"; hreflang="es">

Para especificar varios valores para "hreflang" en un encabezado HTTP con el elemento link, se deben separar los valores con comas como se muestra a continuación:

Link: <https://es.example.com/>; rel="alternate"; hreflang="es",<https://de.example.com/>; rel="alternate"; hreflang="de"

Sitemap. En lugar de usar el marcado, puedes enviar la información sobre las versiones en distintos idiomas con un sitemap.

Como Crear Un Sitemap...

¿Por qué se debe utilizar?

Es muy normal que pongamos el atributo lang o hreflang en el <html>, si es que lo ponemos, y nos olvidamos. Pero no sólo tenemos que acordarnos siempre de ponerlo en el <html> para especificar el idioma general del documento, si dentro hay contenido en un idioma diferente al declarado en el <html>, aunque sea una sola palabra, hay que volver a utilizar el atributo lang.

Entre las muchas razones, algunas de las que creo más importantes son:

Asistentes de navegación

Algunos asistentes de navegación, como los lectores de pantalla que utilizan sintetizadores de voz o los traductores Braille, tienen como objetivo reproducir el contenido escrito en otro formato que pueda ser utilizado por el .

Para producir los mejores resultados, el asistente de navegación necesita conocer el idioma en el que está escrito el texto, o, en el caso de elementos editables, el idioma en el que el debería introducir el contenido.

Por ejemplo, un sintetizador de voz suele tener programados varios idiomas, incluyendo variantes regionales junto a sus acentos y dicciones. Gracias a la información proporcionada por el atributo lang, el sintetizador puede saber si tiene que pasar a utilizar otro idioma o no.

Debido a este uso por asistentes de navegación y sus implicaciones en accesibilidad, el atributo lang es recomendando en las guías de accesibilidad de la W3C. Ten esto siempre presente.

Selección de tipografía

Los navegadores, y -agents en general, pueden utilizar la información del atributo lang o hreflang para seleccionar una tipografía adecuada para representar el texto según el idioma. Algunos idiomas comparten glifos muy similares pero solo si el navegador conoce el idioma utilizado, podrá elegir la fuente que contenga el glifo que represente el texto de la mejor forma.

Traductores y correctores ortográficos

Bueno, que decir, si los -agents pueden elegir la tipografía adecuada y los sintetizadores de voz pueden cambiar de pronunciación, los traductores y correctores ortográficos simplemente no pueden realizar su trabajo correctamente si no saben el idioma del que están traduciendo o que están corrigiendo.

Implicaciones en CSS y renderizado de texto

Cuándo un elemento tiene el atributo lang, se le puede aplicar el pseudo selector :lang. Por ejemplo, se podría utilizar para especificar una determinada tipografía según el idioma:

body {
    font-family: Roboto, Lato, serif;
}
/* Para el árabe (elementos con atributo lang="co") */
:lang(co) {
    font-family: "Droid Arabic Naskh", Amiri, serif;
}

Además, cada idioma tienes unas propiedades diferentes en algunos signos de puntuación.

Un buen ejemplo lo tenemos en la ruptura de palabras con guión al final de una línea. Cada idioma tiene sus reglas para definir dónde se debe hacer esa ruptura. En español, por ejemplo, se hace una ruptura silábica y, en palabras compuestas, también ruptura morfológica. El navegador necesita conocer el idioma del texto para poder decidir donde romper una palabra si es necesario.

Derivado de lo anterior, el atributo lang afecta a algunas propiedades CSS, por ejemplo hyphen: auto solo funciona si el elemento al que se le aplica tiene definido el atributo lang (aunque sea heredado de un elemento padre).

Otro buen ejemplo lo tenemos en los símbolos de puntuación que utiliza cada idioma para representar citas en línea, que se corresponden con el elemento <q> en HTML. Al utilizar el elemento <q> no se debe utilizar ningún signo de puntuación, por ejemplo " o <<, sino que debe ser introducido por el -agent, y lo hará según el idioma. Si queremos modificarlo lo podemos hacer con CSS:

/* General para todos los elementos q */
q:before { content: open-quote; }
q:after { content: close-quote; }

/* Inglés */
:lang(en) q { quotes: '“' '”'; }
/* Francés */
:lang(fr) q { quotes: '«' '»'; }
/* Alemán */
:lang(de) q { quotes: '»' '«'; }

Posibles implicaciones en SEO

No hay nadie (yo no he encontrado a nadie quiero decir) que pueda demostrar con datos que el uso el atributo lang afecta positivamente al posicionamiento en buscadores. La mayoría de buscadores ya son capaces de detectar el idioma de una página de forma automática, probablemente el atributo lang establecido en la etiqueta <html> global no tenga mucho efecto en el SEO, si es que tiene alguno.

Al menos Google lo ignora para esto fines, pero ojo, no se debe confundir con el atributo hreflang de los enlaces alternativos que indican las versiones en diferentes idiomas de un mismo documento HTML. El atributo lang y el atributo hreflang de los enlaces son dos cosas diferentes.