Pourquoi utiliser les balises <abbr> et <acronym> ?▲
Ces balises sont utilisées pour apporter une sémantique supplémentaire au contenu Web. La balise est placée autour du texte important, et son attribut title contient l'information supplémentaire.
<abbr title="association">assoc.</abbr>En théorie deux groupes d'utilisateurs peuvent bénéficier des balises <abbr> et <acronym> :
- Les utilisateurs de dispositifs d'assistance aux déficients visuels tels que les lecteurs vocaux et les terminaux Braille, bien qu'il s'avère que beaucoup d'utilisateurs de ces appareils ne peuvent pas accéder à l'attribut title ;
- Les utilisateurs qui ne connaissent pas la signification de l'abréviation ou de l'acronyme.
Les types d'abréviations▲
Le mot "abréviation" vient du mot Latin Tardifabbreviare (raccourcir) dérivé lui-même de brevi (court). Bien que cela soit contesté par certains, toutes les méthodes consistant à raccourcir des mots ou des phrases sont des variantes d'abréviations.
Parmi ces variantes on trouve :
- Les sigles ;
- Les contractions ;
- Les acronymes.
Les abréviations▲
Définition : forme raccourcie d'un mot ou d'une phrase, utilisée pour sa brièveté en lieu et place de la forme complète, et constituée de la (ou des) première(s) lettre(s) du mot ou de la phrase suivie d'un point.
- assoc. est l'abréviation d'association
<abbr title="association">assoc.</abbr>Les sigles▲
Définition : abréviation composée uniquement des initiales des mots qu'elle désigne, et dont chaque lettre qui la compose est prononcée séparément (en anglais initialism, terme dont la première apparition dans le Oxford English Dictionary (OED) date de 1899).
- USA est le sigle de United States of America ;
- IE est le sigle de Internet Explorer ;
- CSS est le sigle de Cascading Style Sheets ;
- HLM est le sigle de Habitation à Loyer Modéré.
Comme il n'existe pas de balise (X)HTML spécifique pour les sigles, il sera placé dans une balise <abbr>.
<abbr title="Cascading Style Sheets">CSS</abbr>Les contractions▲
- Forme abrégée d'un mot, commençant par le début du mot et se terminant par sa dernière lettre ;
- Façon raccourcie d'écrire deux mots en un, en fusionnant les mots et en replaçant une ou plusieurs lettres par une apostrophe.
- Ave est la contraction de Avenue (type 1) ;
- can't est la contraction de cannot (type 2) ;
- won't est la contraction de will not (type 2).
Il n'existe pas de balise (X)HTML pour les contractions. Il est cependant très peu probable que quiconque souhaite utiliser une balise pour désigner une contraction. (1)
Les acronymes▲
Les acronymes, étant la version abrégée d'un ensemble de mots, font partie des abréviations. Ils sont cependant plus explicites. Un acronyme est défini comme un MOT formé à partir des initiales (ou des premières syllabes) d'un groupe de mots composant un nom ou un titre. Le point important ici est qu'un acronyme doit être un MOT - c'est-à-dire composé de syllabes prononçables.
- Sida est l'acronyme de Syndrome de l'Immuno Déficience Acquise ;
- Cobol est l'acronyme de Common Business-Oriented Language ;
- Laser est l'acronyme de Light Amplification by Stimulated Emission of Radiation ;
- Modem est l'acronyme de MOdulateur-DEModulateur.
<acronym title="Radio Detecting And Ranging">radar</acronym>Confusion entre la balise <abbr> et l'attribut "abbr"▲
ABBR est déroutant en ce sens qu'il est à la fois une balise HTML et un attribut. Il est important de noter que ces deux cas d'utilisation sont cependant diamétralement opposés.
La balise <abbr> est utilisée pour fournir des informations complémentaires concernant les abréviations, sigles et contractions grâce à l'attribut title. Par exemple :
<abbr title="association">assoc.</abbr>L'attribut "abbr" est utilisé au contraire pour fournir une information plus concise aux dispositifs d'assistance tels que les lecteurs vocaux, quand ces derniers "lisent" les informations contenues dans des tableaux. Par exemple :
<th abbr="vis">vis longues et pointues</th>Application de styles aux balises <abbr> et <acronym>▲
Les balises <abbr> et <acronym> sont souvent affichées avec un soulignement en pointillé, pour les distinguer des hyperliens utilisant le soulignement continu. Ceci indique à l'utilisateur qu'il peut interagir avec la balise, mais qu'il ne s'agit pas d'un hyperlien standard.
Ceci peut être obtenu avec une simple règle CSS telle que :
abbr, acronym
{
border-bottom: .1em dotted;
}Pourquoi utiliser une taille en em plutôt qu'en pixels ?▲
Utiliser une valeur spécifiée en em permettra à l'épaisseur de la bordure d'être proportionnelle à la taille de la police, petite ou grande.
Pourquoi n'y a-t-il pas de couleur spécifiée ?▲
La propriété border-bottom permet de définir les valeurs de trois autres propriétés en une seule affectation. Ces propriétés sont :
- border-width ;
- border-style ;
- border-color.
Chacune de ces propriétés a une valeur par défaut - une valeur qui sera appliquée par le navigateur si aucune autre n'est spécifiée par l'auteur de la page.
- border-width a une valeur par défaut égale à "medium" ;
- border-style a une valeur par défaut égale à "none" ;
- border-color a une valeur par défaut égale à la valeur de la propriété "color".
Si l'auteur ne spécifie pas de couleur, la valeur par défaut sera utilisée. Pour border-color, la valeur par défaut est "la valeur de la propriété color". Cela signifie que la couleur de la bordure sera toujours la même que celle du texte.
Si la couleur de votre texte varie selon les pages qui composent le site ou même à l'intérieur d'une même page, laisser non spécifiée la couleur dans la propriété border-bottom a l'avantage de ne pas avoir à la modifier à chaque fois que le texte change de couleur.
Changer le curseur▲
Vous pouvez aussi faciliter la navigation des utilisateurs en changeant le curseur quand il passe au-dessus d'une abréviation ou d'un acronyme :
abbr, acronym
{
border-bottom: .1em dotted;
cursor: help;
}Exemple d'application de styles sur une abréviation et un acronyme
Support de <abbr> dans Internet Explorer 5 et 6▲
Internet Explorer 5 et 6 pour Windows ne supportent pas la balise <abbr>.
- Utiliser de manière incorrecte la balise <acronym> à la place de la balise <abbr> ;
- Imbriquer une balise <span> dans la balise <abbr> et appliquer à la balise <span> le même style ;
- Utiliser Javascript pour résoudre le problème ;
- Utiliser la méthode Abbr-acadabra.