2 Associés est une agence web de Montréal spécialisée en développement web et mobile, stratégie de contenu SEO, SEM et les technologies langagières.

Vous voulez discuter?

Attribut lang

attribut-lang

Au Québec, nous avons plus souvent l’occasion de travailler sur des projets Web multilingue et en tant que développeur « Front-end », j’ai souvent eu à négocier du contenu dans une langue et ensuite traduits : Images, titres, extraits, etc. En général, de l’anglais au français, on gagne environ 20% plus de mots. Parfois, 20% plus de mots veut dire un design qui brise dans une langue et non dans l’autre.

Attribut :lang en général

Depuis HTML 5, l’attribut lang peut être utilisé sur n’importe laquelle des balises HTML. Cet attribut déclare la langue d’une partie ou d’une page entière et en ce sens, aide les moteurs de recherches et les navigateurs à en comprendre le contenu. Selon le W3C, il serait recommandé de déclarer l’attribut dans la balise avec le code de la langue :

<html lang="fr">
...
</html>

Personnellement j’ajoute aussi le code de la région comme ceci :

<html lang="fr-CA">
...
</html>

Tous les navigateurs supportent l’attribut ce qui en fait un sélecteur efficace. Prenons par exemple le code suivant :

<html lang="fr-CA">
  <head>
    ...
  </head>
  <body>
    <article>
      <h1>
        Lorem ipsum dolor
      </h1>
      <p>
        Sit amet consectetur...
      </p>
    </article>
  </body>
</html>

Sans ajout de classe ou d’identifiant, j’ai accès aux sélecteurs CSS suivants :

<style>
  body:lang(fr-CA) {...}
  article:lang(fr-CA) {...}
  h1:lang(fr-CA) {...}
  p:lang(fr-CA) {...}
</style>

Pour chacun d’eux, je peux déclarer un style différent. Prenons en exemple 2 pages, une ayant l’attribut lang="en-CA" et l’autre lang="fr-CA". La grandeur de la police de caractère du titre h1 est parfaite en anglais :

<style>
  h1 {
    font-size: 3rem;
  }
</style>

En français, 1 mot de plus s’est ajouté, dû à la traduction, et il faudrait maintenant diminuer la grandeur de la police de caractère :

<style>
  h1 {
    font-size: 3rem;
  }
  h1:lang(fr-CA) {
    font-size: 2.55rem; /* 85 % de la valeur d'origine */
  }
</style>

S’il avait fallu diminuer l’ensemble de l’article en français j’aurais pu utiliser un sélecteur plus haut comme article:lang(fr-CA) ou même body:lang(fr-CA). Évidemment, tout ce qui peut être défini par CSS est modifiable par cette façon sans modification du DOM d’origine.

Attribut :lang dans d’autres éléments

Comme mentionné ci-dessus, l’attribut lang peut être utilisé sur n’importe laquelle des balises HTML. Prenons par exemple le code HTML suivant :

<html lang="fr-CA">
  <head>
    ...
  </head>
  <body>
    <p>
      Les Anglais écrivent <em lang="en-GB">colour</em>
      alors que les Américains écrivent <em lang="en-US">color</em>
    </p>
  </body>
</html>

L’attribut lang, lorsqu’il est utilisé sur un élément à l’intérieur de la page, indique un changement de langue.

Trop souvent encore, l’attribut lang est manquant ou inexacte. J’ai souvent constaté que peu importe la langue de la page, l’attribut reste le même. Souvent, je dois en faire la demande aux équipes de développeurs à travers mes différents mandats. Heureusement que ce n’est pas difficile à mettre en place. Cet attribut est peut-être encore sous-estimé par certains mais croyez-moi, ça vaut la peine car en Front-end, on ne sait pas toujours ce qu’une traduction nous réserve. Ceci dit, je n’encourage pas le design selon la langue mais quelques fois, une exception est nécessaire.

Ressources externes :

Commentez cet article

Votre adresse de courriel ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Articles reliés