Docs HTML exécutables : Attribut lang

Q: Que mettre dans l'attribut lang de html ?

Un code de langue du standard BCP 47 : en pour l'anglais, es pour l'espagnol, fr pour le français, ja pour le japonais. N'ajoutez une région que si elle compte, comme dans en-US, en-GB ou pt-BR.

Q: Faut-il utiliser lang="fr" ou lang="fr-FR" ?

Les deux sont valides. fr suffit pour la plupart des pages en français. Utilisez fr-FR ou fr-CA quand la variante régionale compte, par exemple pour l'orthographe, les dates ou la prononciation de certains mots.

Q: Comment marquer un texte dans une autre langue ?

Ajoutez lang à l'élément qui l'entoure : bon appétit . Les lecteurs d'écran changent de prononciation pour cette expression, et le CSS peut la styliser avec :lang(fr).

Q: Quelle est la différence entre lang et hreflang ?

lang indique dans quelle langue est le contenu d'un élément. hreflang se place sur un lien et indique dans quelle langue est la page liée, c'est ainsi que les sites signalent aux moteurs de recherche les autres versions linguistiques d'une page.

Définir la langue de la page

Placez l'attribut lang sur l'élément <html>, avec le code de la langue dans laquelle votre page est écrite :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>lang</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <p>Hello! This page is in English.</p>
  <p id="out" style="color: #6b7280;"></p>
  <script>
    document.getElementById('out').textContent =
      'Page language: ' + document.documentElement.lang +
      '. Your browser language: ' + navigator.language + '.';
  </script>
</body>
</html>

L'attribut n'a aucun effet visible sur ce paragraphe, mais il change la façon dont la page est traitée : un lecteur d'écran la lit avec une voix anglaise, le navigateur s'en sert pour décider s'il propose une traduction, et un correcteur orthographique peut s'en servir pour choisir le dictionnaire anglais. Sans lui, les outils doivent deviner, et un lecteur d'écran réglé sur une autre langue peut lire le texte anglais avec une mauvaise prononciation.

Les codes de langue

La valeur est une étiquette de langue du standard BCP 47. La plupart sont un code de langue de deux lettres, éventuellement suivi d'une région ou d'une écriture :

Code	Langue
`en`	Anglais
`en-US`, `en-GB`	Anglais tel qu'utilisé aux États-Unis, au Royaume-Uni
`es`, `es-MX`	Espagnol, espagnol tel qu'utilisé au Mexique
`pt-BR`	Portugais tel qu'utilisé au Brésil
`fr`, `de`, `it`	Français, allemand, italien
`ar`, `he`	Arabe, hébreu (de droite à gauche, voir plus bas)
`ja`, `ko`	Japonais, coréen
`zh-Hans`, `zh-Hant`	Chinois en caractères simplifiés, traditionnels

Les codes sont insensibles à la casse, mais la convention est la langue en minuscules et la région en majuscules. N'ajoutez une région que si la variante compte ; en est une valeur complète et correcte.

Ce que lang change de façon visible

La plupart des effets de lang concernent les logiciels, mais quelques-uns se voient à l'écran. Les guillemets de l'élément <q> suivent la langue, tout comme les règles de casse :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Visible effects</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; font-size: 18px; }
    td { padding: 4px 12px; border-bottom: 1px solid #e5e7eb; }
    .up { text-transform: uppercase; }
  </style>
</head>
<body>
  <table>
    <tr><td>English</td><td lang="en"><q>quote</q></td><td lang="en" class="up">istanbul</td></tr>
    <tr><td>French</td><td lang="fr"><q>quote</q></td><td lang="fr" class="up">istanbul</td></tr>
    <tr><td>German</td><td lang="de"><q>quote</q></td><td lang="de" class="up">istanbul</td></tr>
    <tr><td>Japanese</td><td lang="ja"><q>quote</q></td><td lang="ja" class="up">istanbul</td></tr>
    <tr><td>Turkish</td><td lang="tr"><q>quote</q></td><td lang="tr" class="up">istanbul</td></tr>
  </table>
</body>
</html>

Chaque ligne a son propre style de guillemets. Dans la dernière colonne, le même text-transform: uppercase donne « ISTANBUL » en anglais et « İSTANBUL » en turc, car le turc garde le point sur le i majuscule. Changez le lang de la ligne turque en en et le point disparaît. La césure automatique (hyphens: auto en CSS) dépend aussi de lang : le navigateur doit connaître la langue pour savoir où couper les mots.

Marquer des expressions dans une autre langue

lang fonctionne sur n'importe quel élément, pas seulement <html>. Quand une page dans une langue cite une expression dans une autre, entourez l'expression et donnez-lui son propre code. Le CSS peut cibler les langues avec le sélecteur :lang() :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Mixed languages</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    :lang(fr), :lang(es) { font-style: italic; color: #2563eb; }
  </style>
</head>
<body>
  <p>The chef said <span lang="fr">bon appétit</span> and left.</p>
  <p>Our team motto is <span lang="es">poco a poco</span>: little by little.</p>
</body>
</html>

Un lecteur d'écran passe à la prononciation française pour « bon appétit », puis revient à l'anglais ensuite. :lang(fr) correspond aussi à fr-CA et à toute autre variante du français, et il correspond aux éléments qui héritent la langue d'un ancêtre, ce qu'un sélecteur d'attribut comme [lang="fr"] manquerait.

Langues de droite à gauche : dir

L'arabe, l'hébreu, le persan et l'ourdou s'écrivent de droite à gauche. lang nomme la langue ; l'attribut dir fixe le sens. Une page entière en arabe utilise les deux sur <html> :

<html lang="ar" dir="rtl">

Pour une courte expression de droite à gauche dans une page de gauche à droite, placez les deux sur l'élément qui l'entoure :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>dir</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    blockquote { border-inline-start: 4px solid #16a34a; margin: 12px 0; padding-inline-start: 12px; }
  </style>
</head>
<body>
  <p>The Arabic word for hello is <span lang="ar" dir="rtl">مرحبا</span>.</p>
  <blockquote lang="ar" dir="rtl">مرحبا بكم في الموقع</blockquote>
</body>
</html>

Le blockquote s'aligne à droite et sa barre verte passe aussi à droite, car border-inline-start suit le sens du texte. Utiliser des propriétés logiques comme margin-inline-start plutôt que margin-left garde les mises en page correctes dans les deux sens.

lang ou hreflang

lang décrit le contenu d'un élément. hreflang se place sur un lien et décrit la page vers laquelle il pointe. Les sites traduits listent chaque version dans le <head> pour que les moteurs de recherche envoient chaque lecteur vers la bonne :

<link rel="alternate" hreflang="en" href="https://example.com/">
<link rel="alternate" hreflang="de" href="https://example.com/de/">
<link rel="alternate" hreflang="x-default" href="https://example.com/">

Chaque page traduite définit quand même son propre lang sur <html> : lang="de" sur la page allemande.

Erreurs fréquentes

Omettre lang. Beaucoup de templates l'oublient ; définissez-le à côté du doctype sur chaque page.
Copier lang="en" dans les pages traduites. Une page allemande marquée comme anglaise est lue avec une prononciation anglaise. Accordez-le au contenu.
Utiliser un code de pays comme langue. lang="jp" et lang="gr" ne sont pas le japonais et le grec ; les codes sont ja et el.
Utiliser lang pour fixer le sens. lang="ar" seul ne fait pas aller le texte de droite à gauche. Ajoutez dir="rtl".
Écrire lang="en_US". Le séparateur est un trait d'union : en-US.

Questions fréquentes

À quoi sert l'attribut lang en HTML ?

Il déclare la langue du contenu de l'élément. Les lecteurs d'écran s'en servent pour choisir la bonne voix et la bonne prononciation, les navigateurs pour proposer une traduction, choisir les guillemets et faire la césure, et certains correcteurs orthographiques pour choisir un dictionnaire.

Que mettre dans l'attribut lang de html ?

Un code de langue du standard BCP 47 : en pour l'anglais, es pour l'espagnol, fr pour le français, ja pour le japonais. N'ajoutez une région que si elle compte, comme dans en-US, en-GB ou pt-BR.

Faut-il utiliser lang="fr" ou lang="fr-FR" ?

Les deux sont valides. fr suffit pour la plupart des pages en français. Utilisez fr-FR ou fr-CA quand la variante régionale compte, par exemple pour l'orthographe, les dates ou la prononciation de certains mots.

L'attribut lang a-t-il un effet sur le SEO ?

Google a indiqué qu'il détecte la langue à partir du texte lui-même et ne s'appuie pas sur l'attribut lang. Définissez-le correctement quand même : d'autres moteurs de recherche, les outils de traduction et les lecteurs d'écran l'utilisent. Pour relier les versions traduites d'une page, utilisez des liens hreflang.

Comment marquer un texte dans une autre langue ?

Ajoutez lang à l'élément qui l'entoure : <span lang="fr">bon appétit</span>. Les lecteurs d'écran changent de prononciation pour cette expression, et le CSS peut la styliser avec :lang(fr).

Quelle est la différence entre lang et hreflang ?

lang indique dans quelle langue est le contenu d'un élément. hreflang se place sur un lien et indique dans quelle langue est la page liée, c'est ainsi que les sites signalent aux moteurs de recherche les autres versions linguistiques d'une page.

Concepts liés