Validación HTML: Cuando se especifica el atributo "xml:lang" sin namespace, el elemento también debe tener presente el atributo "lang" con el mismo valor.

Acerca de este problema HTML

El atributo xml:lang es una reliquia de XHTML, donde era la forma estándar de declarar el idioma de un elemento. En HTML5 (la serialización text/html), el atributo lang es la forma adecuada de especificar el idioma. La especificación HTML permite xml:lang por propósitos de compatibilidad, pero solo si va acompañado de un atributo lang con un valor idéntico. Si xml:lang aparece solo, o si su valor no coincide con el atributo lang, el documento no es conforme.

Esto es importante por varias razones. Los lectores de pantalla y otras tecnologías de asistencia dependen del atributo lang—no de xml:lang—para determinar la pronunciación y el comportamiento específico del idioma. Los motores de búsqueda también usan lang para la indexación de contenido y detección de idioma. Tener xml:lang sin lang significa que la declaración de idioma puede ser ignorada completamente, degradando tanto la accesibilidad como el SEO.

En documentos HTML5 modernos, rara vez hay una razón para incluir xml:lang en absoluto. El atributo lang solo cubre todos los casos de uso. El único escenario donde podrías necesitar ambos es si tu documento debe ser compatible con analizadores tanto HTML como XHTML (marcado polyglot), en cuyo caso los dos atributos deben llevar el mismo valor.

Cómo solucionarlo

Tienes dos opciones:

Eliminar xml:lang y usar solo lang (recomendado para documentos HTML5).
Añadir un atributo lang que coincida con el valor existente de xml:lang (para documentos polyglot).

Si decides mantener ambos atributos, asegúrate de que los valores sean exactamente iguales—incluyendo mayúsculas y subtags. Por ejemplo, lang="en-US" debe ir emparejado con xml:lang="en-US", no con xml:lang="en".

Ejemplos

Incorrecto: `xml:lang` sin `lang`

<html xml:lang="en">
  <head>
    <title>My Page</title>
  </head>
  <body>
    <p xml:lang="fr">Bonjour le monde</p>
  </body>
</html>

Esto desencadena el error de validación porque tanto los elementos <html> como <p> tienen xml:lang pero ningún atributo lang.

Incorrecto: valores que no coinciden

<html lang="en" xml:lang="en-US">
  <head>
    <title>My Page</title>
  </head>
  <body>
    <p>Hello world</p>
  </body>
</html>

Aunque ambos atributos están presentes, los valores "en" y "en-US" no coinciden, lo cual también es inválido.

Correcto: usar solo `lang` (recomendado)

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Page</title>
  </head>
  <body>
    <p lang="fr">Bonjour le monde</p>
  </body>
</html>

Este es el enfoque más limpio para documentos HTML5. El atributo lang es todo lo que necesitas.

Correcto: ambos atributos con valores coincidentes (polyglot)

<!DOCTYPE html>
<html lang="en" xml:lang="en">
  <head>
    <title>My Page</title>
  </head>
  <body>
    <p lang="fr" xml:lang="fr">Bonjour le monde</p>
  </body>
</html>

Si debes mantener xml:lang, cada elemento que lo tenga también debe tener lang con exactamente el mismo valor.