<abbr> : l'élément d'abréviation

Exemple interactif

<p>
  Vous pouvez utiliser <abbr>CSS</abbr> (Cascading Style Sheets) pour mettre en
  forme votre <abbr>HTML</abbr> (HyperText Markup Language). En utilisant des
  feuilles de style, vous pouvez séparer la couche de présentation
  <abbr>CSS</abbr> et la couche de contenu <abbr>HTML</abbr>. On appelle cela la
  «&nbsp;séparation des préoccupations&nbsp;».
</p>

abbr {
  font-style: italic;
  color: chocolate;
}

Attributs

Cet élément ne prend en charge que les attributs universels. L'attribut title a une signification sémantique particulière lorsqu'il est utilisé avec l'élément <abbr> ; il doit contenir une description complète lisible par un·e humain·e ou le développement de l'abréviation. Ce texte est souvent présenté par les navigateurs sous forme d'infobulle lorsque le curseur de la souris survole l'élément.

Chaque élément <abbr> que vous utilisez est indépendant des autres ; fournir un title pour l'un ne rattache pas automatiquement le même texte d'expansion aux autres éléments ayant le même contenu.

Notes d'utilisation

Cas d'usage généraux

Il n'est pas obligatoire de baliser toutes les abréviations avec <abbr>. Cependant, il existe quelques cas où cela s'avère utile :

• Lorsqu'une abréviation est utilisée et que vous souhaitez fournir un développement ou une définition en dehors du flux du contenu du document, utilisez <abbr> avec un attribut title approprié.
• Pour définir une abréviation qui pourrait être inconnue du lecteur, présentez le terme avec <abbr> et un texte en ligne fournissant la définition. N'ajoutez un attribut title que si le développement ou la définition n'est pas disponible en ligne.
• Lorsque la présence d'une abréviation dans le texte doit être notée sémantiquement, l'élément <abbr> est utile. Cela peut ensuite servir à la mise en forme ou à des scripts.
• Vous pouvez utiliser <abbr> conjointement avec <dfn> pour établir des définitions de termes qui sont des abréviations ou des acronymes. Voir l'exemple Définir une abréviation ci-dessous.

Grammaire

Dans les langues qui possèdent la notion de nombre grammatical (c'est-à-dire où le nombre d'éléments influence la grammaire de la phrase), il convient d'utiliser le même nombre grammatical dans l'attribut title que dans le contenu de l'élément <abbr>. Ceci est particulièrement important dans les langues qui comportent plus de deux formes de nombre, comme l'arabe, mais cela reste pertinent en français et en anglais.

Mise en forme par défaut

Le but de cet élément est purement d'apporter une commodité à l'auteur·ice et tous les navigateurs l'affichent en ligne (display: inline) par défaut, même si la mise en forme par défaut varie d'un navigateur à l'autre :

Certains navigateurs ajoutent un soulignement en pointillés au contenu de l'élément. D'autres ajoutent ce soulignement tout en convertissant le contenu en petites majuscules. D'autres encore n'appliquent pas de style particulier, l'affichant comme un élément <span>. Pour contrôler cette mise en forme, utilisez les propriétés CSS text-decoration et font-variant.

Accessibilité

Écrire l'acronyme ou l'abréviation en toutes lettres lors de sa première utilisation sur une page est bénéfique pour la compréhension, en particulier si le contenu est technique ou utilise un jargon spécifique.

N'ajoutez un attribut title que si le développement de l'abréviation ou de l'acronyme dans le texte n'est pas possible. Une différence entre le mot ou la phrase annoncée et ce qui est affiché à l'écran, surtout s'il s'agit d'un jargon technique peu familier pour un·e lecteur·ice, peut être déroutante.

<p>
  JavaScript Object Notation (<abbr>JSON</abbr>) est un format léger d'échange
  de données.
</p>

Ceci est particulièrement utile pour les personnes qui ne sont pas familières avec la terminologie ou les concepts abordés dans le contenu, les personnes qui apprennent la langue, ainsi que les personnes ayant des troubles cognitifs.

Exemples

Baliser une abréviation pour marquer la sémantique

On peut baliser une abréviation sans fournir de description ou de définition, il suffit d'utiliser <abbr> sans attribut.

HTML

<p>Utiliser <abbr>HTML</abbr> est amusant et facile&nbsp;!</p>

Résultat

Mettre en forme des abréviations

CSS peut être utilisé pour appliquer une mise en forme particulière sur les abréviations.

HTML

<p>
  En utilisant <abbr>CSS</abbr>, vous pouvez mettre en forme vos
  abréviations&nbsp;!
</p>

CSS

abbr {
  font-variant: all-small-caps;
}

Résultat

Fournir une description

Ajouter un attribut title permet de fournir un développement ou une définition pour l'abréviation ou l'acronyme.

HTML

<p>Et là je lui ai répondu <abbr title="Laugh Out Loud">LOL</abbr>.</p>

Résultat

Définir une abréviation

Vous pouvez utiliser <abbr> avec <dfn> pour définir plus formellement une abréviation, comme montré ici.

HTML

<p>
  <dfn id="html"><abbr title="HyperText Markup Language">HTML</abbr> est
  un langage de balise qui permet de créer la structure et d'organiser la
  sémantique d'une page web.
</p>

<p>
  Une <dfn id="spec">spécification
  (<abbr title="spécification">spec</abbr>) est un document qui décrit, de façon
  détaillée comme une technologie ou une API fonctionne et comment l'utiliser.
</p>

Résultat

Résumé technique

Spécifications

Compatibilité des navigateurs

Voir aussi

• Utiliser l'élément <abbr>