Déclarer la langue en HTML

Question

Comment bien déclarer la langue du contenu de ma page HTML ?

Réponse rapide

Utilisez toujours un attribut de langue sur la balise html pour déclarer la langue du texte par défaut dans la page. Quand la page contient du contenu dans une autre langue, ajoutez un attribut de langue à un élément qui encadre ce contenu.

Utilisez toujours l’attribut lang pour les pages servies en tant que HTML, et l’attribut xml:lang pour les pages servies comme XML. Pour les documents polyglottes en XHTML 1.x et en HTML5, utiliser les deux conjointement.

Utilisez les codes de langues du IANA Language Subtag Registry. Vous pouvez trouver les sous-codes en vous référant à l’outil de recherche des sous-codes de langues non officiel.

Utilisez des éléments enfants pour prendre en charge les contenus et les valeurs d’attribut de cet élément qui sont dans d’autres langues.

Détails

Les bases

Utilisez toujours un attribut de langue sur l’élément html. Il sera hérité par tous les autres éléments, et ainsi il fixera la langue par défaut de tout le texte contenu dans l’élément head du document.

Notez bien que vous devriez utiliser l’élément html plutôt que l’élément body, puisque l’élément body ne couvre pas le texte contenu par l’élément head du document.

Si votre page comporte du contenu qui est dans une langue différente de celle déclarée dans l’élément html, utilisez des attributs de langue sur les éléments qui entourent ce contenu. Cela vous permet de le styler ou de le traiter différemment.

Dans certaines parties de votre code vous pouvez avoir un problème : si un texte multilingue est présent dans l’élément title, vous ne pourrez pas indiquer que des parties de ce texte sont dans différentes langues parce que l’attribut title ne permet que des caractères, pas de balisage. Il en va de même pour les langues multiples dans les valeurs d’attributs. Il n’existe pas de bonne solution pour le moment.

Choisir le bon attribut

Si votre document est en HTML (c’est à dire qu’il est servi en tant que text/html), utilisez l’attribut lang pour fixer la langue du document ou d’un segment de texte. Par exemple, le code suivant fixe la langue par défaut à français :

<html lang="fr">

Quand vous servez du XHTML 1.x ou des pages polyglottes en tant que text/html, utilisez ensemble les deux attributs lang et xml:lang chaque fois que vous voulez fixer la langue. L’attribut xml:lang est la façon standard d’identifier une information de langue en XML. Assurez-vous que les valeurs des deux attributs sont identiques.

<html lang="fr" xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">

L’attribut xml:lang n’est pas réellement utile pour manipuler le fichier en tant que HTML, mais il devient prioritaire chaque fois que vous traitez ou que vous servez le document en tant que XML. L’attribut lang est permis par la syntaxe XHTML, et peut aussi être reconnu par les navigateurs. Quand on s’appuie sur d’autres analyseurs de XML (comme la fonction lang() de XSLT), on ne doit pas s’attendre à ce que l’attribut lang soit reconnu.

Si vous servez votre page en tant que XML (par exemple à l’aide du type MIME application/xhtml+xml), vous n’avez pas besoin de l’attribut lang. L’attribut xml:lang seul suffira.

<html xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">

Que faire si le contenu d’un élément et son attribut sont dans des langues différentes ?

De temps en temps la langue du texte dans un attribut et celle du contenu d’un élément diffèrent. Par exemple dans le coin supérieur droit de cet article, il y a des liens vers des versions traduites de cette page. Le texte du lien montre la langue de la page cible en utilisant la langue de la page cible, mais un attribut title associé contient une information dans la langue de la page actuelle :

Saisie d'écran montrant une infobulle qui contient le mot 'Spanish' en complément du texte de base 'Español'.

Si votre code ressemble à ce qui suit, les attributs de langue indiqueraient que non seulement le contenu mais aussi l’attribut title sont en espagnol. À l’évidence c’est incorrect.

 Mauvais code. Ne le copiez pas !

<a lang="es" title="Espagnol" href="qa-html-language-declarations.es">Español</a>

Au lieu de ça, déplacez l’attribut contenant le texte dans une autre langue vers un autre élément, comme dans cet exemple, où l’élément span hérite du réglage fr par défaut de l’élément html.

<span title="Espagnol"><a lang="es" href="qa-html-language-declarations.es">Español</a></span>

Que faire si vous ne trouvez aucun élément auquel raccrocher l’attribut ?

Si vous voulez spécifier la langue d’un contenu mais qu’il n’est pas encadré par du code, utilisez un élément tel que span ou div autour du contenu. Voici un exemple :

<p>Vous diriez en chinois : <span lang="zh-Hans">中国科学院文献情报中心</span>.</p>

Choisir les valeurs de langues

Pour vous assurer que tous les agents utilisateurs comprennent quelle langue vous avez précisée, vous devez suivre une approche standard en précisant les valeurs d’attribut de langue. Vous devez aussi considérer comment faire référence de manière standard à différentes formes dialectales, comme par exemple entre l’anglais américain et l’anglais britannique, qui divergent significativement en termes d’orthographe et de prononciation.

Les règles de création des valeurs d’attribut de langue sont décrites par une spécification de l’IETF appelée BCP 47. En plus de spécifier comment utiliser des étiquettes de langues simples, telles que en pour l’anglais ou fr pour le français, BCP 47 décrit comment composer des étiquettes de langue qui vous permettent de spécifier des dialectes régionaux, des graphies et d’autres variantes liées à cette langue.

BCP 47 intègre, mais va plus loin que, les règles ISO de langues et de codes de pays. Pour trouver les codes pertinents référez-vous au Registre IANA de Sous-étiquettes de Langues.

Pour une introduction abordable mais assez complète à la syntaxe des étiquettes BCP 47, lisez Étiquettes de langues en HTML et XML. Pour obtenir de l’aide dans le choix de l’étiquette de langue parmi toutes les étiquettes et les combinaisons, référez-vous à Choisir une étiquette de langue.

Information supplémentaire

Spécifier une métadonnée pour la langue des lecteurs

Si vous voulez ajouter une métadonnée qui décrit la langue du lectorat attendu d’une page, plutôt que la langue d’un segment spécifique de texte, faites-le en demandant au serveur d’envoyer l’information dans l’en-tête HTTP Content-Language. Si votre lectorat attendu parle plus d’une langue, l’en-tête HTTP vous permet de spécifier une liste de langues séparée par des virgules.

Voici un exemple d’en-tête HTTP qui déclare que la ressource est un mélange d’anglais, de hindi et de punjabi :

Content-Language: en, hi, pa

Veuillez noter que cette approche n’aura aucun effet si votre page est ouverte depuis un disque dur, ou tout autre emplacement qui n’est pas sur un serveur. Il n’existe pas pour l’instant de méthode reconnue pour utiliser ce genre de métadonnée à l’intérieur de la page.

Par le passé, beaucoup de gens ont utilisé un élément meta dont l’attribut http-equiv était fixé à Content-Language. À cause de confusions durables et d’implémentations imprévisibles de cet élément, la spécification HTML5 l’a rendu non-conforme en HTML, vous ne devriez donc plus l’utiliser.

Pour une question de rétrocompatibilité, HTML5 décrit un algorithme qui permet de deviner la langue par défaut grâce à l’information Content-Language portée par HTTP ou par l’élément meta sous certaines conditions. Cependant c’est seulement un mécanisme de dépannage pour les cas où aucun attribut de langue n’est utilisé sur la balise html. Si vous avez utilisé un attribut de langue sur la balise html, ces méthodes sont négligées.

Pour plus d’informations à propose de Content-Language dans HTTP et dans les éléments meta, lire HTTP et meta pour les informations de langue.

Quelques points non pertinents

Pour faire bonne mesure et afin d’être exhaustifs, il est peut-être intéressant de citer quelques autres points qui ne sont pas pertinents dans cette discussion.

Premièrement, il n’est pas possible de déclarer la langue d’un texte en utilisant CSS.

Deuxièmement, le DOCTYPE qui devrait être à la première ligne de chaque fichier HTML peut contenir ce que certaines personnes prendront pour une déclaration de langue. Le DOCTYPE dans l’exemple ci-dessous contient le texte EN qui signifie « anglais ». Cependant, cette indication précise la langue du schéma associé à ce document ; elle n’a rien à voir avec la langue du document lui-même.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Troisièmement, de temps en temps on peut croire que l’information relative à la langue naturelle peut être déduite de l’encodage de caractères. Cependant, un encodage de caractère ne permet pas d’identifier à coup sûr une langue naturelle : il doit y avoir une association un-à-un entre l’encodage et la langue pour que cette déduction soit vérifiée, or ce n’est pas le cas. Par exemple, un encodage de caractères unique pourra être utilisé pour de nombreuses langues, comme Latin 1 (ISO-8859-1) qui peut encoder aussi bien du français que de l’anglais, ou un grand nombre d’autres langues. De plus, l’encodage peut varier pour une même langue, ainsi l’arabe peut utiliser des encodages comme « Windows-1256 » ou « ISO-8859-6 » ou « UTF-8 ».

Tous ces exemples d’encodage, cependant, sont à présent caducs, puisque tous les contenus devraient être produits en UTF-8, qui couvre presque toutes les langues dans un encodage de caractères unique.

Il en va de même pour la direction du texte. On l’a vu avec les encodages et les langues, il n’y a pas toujours une relation un-à-un entre la langue et la graphie, et donc la direction. Par exemple, l’azerbaïdjanais peut être écrit de droite à gauche (arabe) ou de gauche à droite (latin ou cyrillique), et le code de langue az peut être pertinent dans les deux cas. De plus, le balisage de direction du texte utilisé pour un segment de texte applique une valeur différente au segment, tandis que la langue elle-même ne permet pas de basculer d’un sens à l’autre.