Validación HTML: Este documento parece estar escrito en inglés pero la etiqueta de inicio "html" tiene X

Acerca de este problema HTML

El atributo lang en el elemento <html> declara el idioma principal del documento. El validador de W3C utiliza heurísticas para analizar el contenido de texto de tu página, y cuando detecta una discrepancia entre el idioma declarado y el idioma aparente, genera esta advertencia. Por ejemplo, si el contenido de tu página está escrito en inglés pero tienes lang="fr" (francés) configurado, el validador marcará esta inconsistencia.

Por qué esto es importante

El atributo lang desempeña un papel crítico en varias áreas:

Accesibilidad: Los lectores de pantalla usan el atributo lang para seleccionar las reglas de pronunciación correctas y el perfil de voz. Si una página está escrita en inglés pero declara francés, un lector de pantalla puede intentar leer el contenido con pronunciación francesa, haciéndolo ininteligible para el usuario.
Motores de búsqueda: Los motores de búsqueda usan el atributo lang para entender en qué idioma está una página, lo que afecta cómo se indexa la página y se sirve en los resultados de búsqueda para diferentes regiones.
Funciones del navegador: Los navegadores dependen del atributo lang para avisos de traducción integrados, corrección ortográfica, separación silábica y selección de fuentes. Un valor incorrecto puede causar comportamientos inesperados en todas estas áreas.

Cómo solucionarlo

Identifica el idioma principal de tu contenido. Mira el texto real en tu página: ¿en qué idioma está escrita la mayor parte?
Actualiza el atributo lang a la etiqueta de idioma BCP 47 correcta para ese idioma (por ejemplo, en para inglés, fr para francés, es para español).
Si el atributo lang ya es correcto y la heurística del validador está equivocada (por ejemplo, tu página realmente está en otro idioma pero contiene algo de texto en inglés o código), puedes ignorar esta advertencia sin problema.

Para páginas con contenido en varios idiomas, configura el atributo lang en <html> al idioma principal, luego usa atributos lang en elementos específicos para marcar secciones en otros idiomas.

Ejemplos

❌ Incorrecto: El contenido está en inglés pero `lang` declara francés

<!DOCTYPE html>
<html lang="fr">
  <head>
    <title>My Website</title>
  </head>
  <body>
    <h1>Welcome to my website</h1>
    <p>This is an English paragraph about web development.</p>
  </body>
</html>

El validador detecta que el contenido está en inglés, pero lang="fr" dice que es francés.

✅ Corregido: El atributo `lang` coincide con el idioma del contenido

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Website</title>
  </head>
  <body>
    <h1>Welcome to my website</h1>
    <p>This is an English paragraph about web development.</p>
  </body>
</html>

✅ Contenido en varios idiomas con atributos `lang` apropiados

Si tu página está principalmente en inglés pero contiene secciones en otro idioma, configura el idioma del documento a en y anota las secciones en idioma extranjero individualmente:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Language Examples</title>
  </head>
  <body>
    <h1>Welcome</h1>
    <p>This page is mostly in English.</p>
    <blockquote lang="fr">
      <p>Ceci est une citation en français.</p>
    </blockquote>
  </body>
</html>

Este enfoque asegura que los lectores de pantalla cambien la pronunciación solo para el <blockquote> francés, mientras que el resto de la página se lee correctamente como inglés.