L'élémentHTML<abbr> représente une abréviation ou un acronyme.

Lors de l'inclusion d'une abréviation ou d'un acronyme, fournissez le développement complet du terme en texte clair lors de la première occurrence, accompagnée du<abbr> pour baliser l'abréviation. Cela informe l'utilisateur·ice de la signification de l'abréviation ou de l'acronyme.

L'attribut optionneltitle peut fournir le développement de l'abréviation ou de l'acronyme lorsqu'un développement complet n'est pas présent. Cela donne un indice aux agents utilisateurs sur la façon d'annoncer/afficher le contenu tout en informant tous les utilisateur·ice·s de la signification de l'abréviation. Si présent,title doit contenir cette description complète et rien d'autre.

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 lesattributs universels. L'attributtitle a une signification sémantique particulière lorsqu'il est utilisé avec l'élément<abbr> ; ildoit 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 untitle 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 attributtitle 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 attributtitle 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'exempleDéfinir une abréviation ci-dessous.

Grammaire

Dans les langues qui possèdent la notion denombre 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'attributtitle 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 CSStext-decoration etfont-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 attributtitle 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 attributtitle 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><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>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>