IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Mise en forme des abréviations et acronymes

Date de publication : 25/07/2006 , Date de mise à jour : 16/03/2008

Par Eric Grimois
 

Ceci est la traduction française de l'article "Styling abbreviations and acronyms" de Russ Weakley du site MaxDesign, qui explique quand et comment utiliser les balises <abbr> et <acronym> et quels styles leur appliquer. en L'article en version originale.

            

Pourquoi utiliser les balises <abbr> et <acronym> ?
Les types d'abréviations
Les abréviations
Les sigles
Les contractions
Les acronymes
Confusion entre la balise <abbr> et l'attribut "abbr"
Application de styles aux balises <abbr> et <acronym>
Pourquoi utiliser une taille en em plutôt qu'en pixels ?
Pourquoi n'y a-t-il pas de couleur spécifiée ?
Changer le curseur
Support de <abbr> dans Internet Explorer 5 et 6


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. Par exemple :
<abbr title="association">assoc.</abbr>
En théorie deux populations d'utilisateurs devraient 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 "titre"
  • 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 tardif abbreviare (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.

Exemple :

  • assoc. est l'abréviation d'association
Exemple avec balise :
<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)

Exemples :

  • 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 HTML spécifique pour les sigles, le sigle sera placé dans une balise <abbr>.
Exemple de balisage d'un sigle :
<abbr title="Cascading Style Sheets">CSS</abbr>

Les contractions

Les contractions se présentent sous deux formes :

  1. Forme abrégée d'un mot, commençant par le début du mot et se terminant par sa dernière lettre
  2. Façon raccourcie d'écrire deux mots en un, en fusionnant les mots et en replaçant une ou plusieurs lettres par une apostrophe
Exemples :

  • 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.

Exemples :

  • 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
Exemple avec balise :
<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. Mais plus important, ils jouent des rôles complètement 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-with
  • 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. Ces valeurs par défaut sont :

  • border-with 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 balise <abbr> ou <acronym> :
abbr, acronym

{
	border-bottom: .1em dotted;
	cursor: help;
}


Support de <abbr> dans Internet Explorer 5 et 6

Internet Explorer 5 et 6 pour Windows ne supportent pas la balise <abbr>. Ceci laisse au développeur une série de choix :



            

(1) N.D.T. : les contractions sont une caractéristique de la langue anglaise n'ayant pas d'équivalent en français.

Valid XHTML 1.1!Valid CSS!

Ce document est issu de http://www.developpez.com et reste la propriété exclusive de son auteur. La copie, modification et/ou distribution par quelque moyen que ce soit est soumise à l'obtention préalable de l'autorisation de l'auteur.