Balise HTML abbr - Apprendre HTML

La balise HTML <abbr> marque une abréviation ou un acronyme — une forme raccourcie d'un mot ou d'une expression, comme HTML, CSS, M., déc., ASAP ou ATM. En encadrant la forme courte dans <abbr> et en fournissant son expansion complète via l'attribut title, vous transformez une suite de lettres en un contenu descriptif et lisible par les machines.

Cette page explique à quoi sert <abbr>, pourquoi il est important pour l'accessibilité et le SEO, comment l'attribut title fonctionne (et ses limites), ainsi que les bonnes pratiques pour l'utiliser correctement.

Pourquoi `<abbr>` est important

Visuellement, <abbr> fait très peu — au mieux, certains navigateurs ajoutent un léger soulignement en pointillés. Sa vraie valeur est sémantique : il indique aux logiciels, et pas seulement aux lecteurs voyants, qu'un texte est une abréviation et ce qu'elle signifie.

Lecteurs d'écran. Les technologies d'assistance peuvent annoncer l'expansion contenue dans l'attribut title, ou lire l'abréviation d'une manière adaptée aux préférences de l'utilisateur. Cela aide les personnes qui ne peuvent pas voir une info-bulle au survol à comprendre des acronymes comme WCAG ou ARIA.
Moteurs de recherche et autres outils. Baliser les abréviations fournit aux robots d'indexation, aux outils de traduction et aux indexeurs un contexte supplémentaire sur la signification réelle de vos termes abrégés.
Lecteurs non natifs et débutants. Un lecteur qui ne connaît pas ASAP ou un acronyme propre à un domaine obtient la signification complète plutôt que de devoir la deviner.

En résumé, un simple HTML n'est que quatre lettres ; <abbr title="HyperText Markup Language">HTML</abbr> représente quatre lettres plus leur signification, accessible aux humains comme aux machines.

Syntaxe

La balise <abbr> fonctionne par paires. Le contenu est écrit entre la balise ouvrante (<abbr>) et la balise fermante (</abbr>).

Exemple de la balise HTML `<abbr>` :

Balise HTML <abbr>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p><abbr title="Universal Resource Locator">URL</abbr> - This is a specific way of designating an individual resource address on the Internet </p>
  </body>
</html>

Essayez vous-même »

Result

L'attribut `title`

La balise <abbr> n'a pas d'attributs obligatoires, mais l'attribut title est ce qui la rend utile. Placez la forme développée complète de l'abréviation dans title :

<p><abbr title="HyperText Markup Language">HTML</abbr> is the standard markup language for web pages.</p>

Sur les navigateurs de bureau, survoler l'abréviation avec la souris affiche l'expansion sous forme d'info-bulle. Les lecteurs d'écran peuvent également exposer la valeur de title aux utilisateurs.

Limites de `title`

L'info-bulle title est pratique, mais vous ne devez pas vous y fier comme unique moyen pour les utilisateurs de découvrir l'expansion :

Elle n'apparaît qu'au survol de la souris. Les utilisateurs d'écrans tactiles (téléphones, tablettes) et les utilisateurs exclusivement au clavier ne peuvent généralement pas la déclencher.
Son affichage est incohérent entre les lecteurs d'écran et son annonce n'est pas garantie.

Pour cette raison, les Web Content Accessibility Guidelines (critère de succès WCAG 3.1.4 Abbreviations) recommandent également de développer l'abréviation dans le texte visible lors de sa première utilisation, puis d'employer la forme courte par la suite :

<p>
  The <abbr title="World Wide Web Consortium">W3C</abbr> (World Wide Web
  Consortium) develops web standards. The W3C also maintains the HTML
  specification.
</p>

Ainsi, la signification est accessible à tous — et pas seulement aux utilisateurs qui peuvent utiliser le survol.

Attributs

La balise <abbr> prend en charge les Attributs Globaux et les Attributs d'Événements. Le plus important d'entre eux est l'attribut global title, décrit ci-dessus.

Comment styliser une balise HTML `<abbr>`

Par défaut, certains navigateurs affichent un soulignement en pointillés sous le contenu de <abbr>, mais le rendu est peu homogène — par exemple, les anciennes versions de certains navigateurs n'affichaient aucun soulignement. Pour obtenir un aspect fiable et prévisible, stylisez-le vous-même avec CSS. Un schéma courant consiste à utiliser une bordure inférieure en pointillés et un curseur help pour indiquer que le survol révèle davantage d'informations :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      abbr {
        text-decoration: none;
        border-bottom: 1px dotted #000;
        cursor: help;
      }
    </style>
  </head>
  <body>
    <p><abbr title="HyperText Markup Language">HTML</abbr> is the standard markup language for documents designed to be displayed in a web browser.</p>
  </body>
</html>

Result

Quand utiliser `<abbr>` et bonnes pratiques

Utilisez <abbr> chaque fois qu'une forme abrégée pourrait ne pas être comprise par tous les lecteurs, en particulier lors de sa première occurrence dans votre contenu.

Fournissez toujours un title avec l'expansion complète. Un <abbr> sans title apporte peu de valeur.
Développez le terme à la première utilisation dans le texte visible (WCAG 3.1.4), puis utilisez l'abréviation par la suite. Ne faites pas de l'info-bulle title la seule source de signification.
Limitez le title à l'expansion uniquement — écrivez World Wide Web Consortium, et non une phrase d'explication complète.
Ne balisez pas à l'excès. Il n'est pas nécessaire d'encadrer chaque occurrence d'une abréviation bien connue sur une page ; baliser la première occurrence est généralement suffisant.
Utilisez-le aussi pour les acronymes. Le HTML moderne ne dispose pas d'élément dédié aux acronymes — <abbr> couvre à la fois les abréviations et les acronymes.

Compatibilité navigateurs

L'élément <abbr> est pris en charge par tous les navigateurs modernes. Notez que l'apparence par défaut varie : certains navigateurs affichent un soulignement en pointillés, d'autres n'affichent rien de visible. Si un repère visuel cohérent vous importe, appliquez votre propre CSS comme illustré ci-dessus plutôt que de vous fier au rendu par défaut du navigateur.

Éléments associés

<acronym> — l'élément obsolète pour les acronymes ; utilisez <abbr> à la place.
<dfn> — marque l'instance de définition d'un terme.
<cite> — référence le titre d'une oeuvre créative.

Pratique

Quelle est la fonction de la balise <abbr> en HTML ?

Elle est utilisée pour indiquer une abréviation ou un acronyme.Elle est utilisée pour créer un lien hypertexte.Elle fournit une info-bulle lorsqu'on survole le texte qu'elle contient.Elle est utilisée pour définir une section dans un document.

Pourquoi <abbr> est important

Syntaxe

Exemple de la balise HTML <abbr> :

L'attribut title

Limites de title