HTML fournit une méthode simple et rapide pour indiquer la présence d'abrévations et pour fournir leur signification au lecteur.
| Prérequis : | Vous devriez au préalable savoir comment créer un document HTML simple. |
|---|---|
| Objectifs : | Apprendre à indiquer des abréviations et des acronymes avec HTML. |
À propos des abréviations
Lorsqu'on écrit, on utilise fréquemment des abréviations et des acronymes. Une abréviation est une notation raccourcie : par exemple, on écrit parfois « dev » à la place de « développeur ». Un acronyme est une combinaison, lisible, des initiales d'un groupe de termes, par exemple « NASA » signifie « National Aeronautics and Space Administration ».
Il est nécessaire de s'assurer que l'abréviation puisse être comprise par les visiteurs de la page. Sur le papier, on explicite généralement la première occurence de l'abréviation en utilisant la forme complète et abrégée avant d'utiliser la forme abrégée pour les occurences suivantes :
L'Union Européenne (UE) est composée de 28 états et les États-Unis d'Amérique (USA) contient 50 états. Les USA sont une république fédérale et l'UE est une association politique et économique de plusieurs états indépendants.
Cette méthode peut parfaitement s'appliquer aux pages web mais HTML fournit un outil supplémentaire pour expliquer une abréviation aux lecteurs d'une page web.
L'élément <abbr>
L'élément HTML abbreviation (pour abréviation en anglais) (<abbr>) est utilisé pour identifier les abrévations et les acronymes et permettre aux lecteurs qui ne connaitraient pas le terme de lire et comprendre le texte correctement (éventuellement grâce à un lecteur d'écran). Cet élément doit être utilisé dès que possible.
Note : Si vous entendez parler de l'élément <acronym>, sachez qu'il est désormais déprécié et qu'il ne devrait donc plus être utilisé car les navigateurs pourraient arrêter de le supporter à tout moment.
<p>Pouvez-vous m'envoyer les documents <abbr>SVP</abbr> ?</p>
Il est possible d'épeler les abréviations grâce à l'attribut title de l'élément :
<p>Pouvez-vous m'envoyer les documents <abbr title="s'il vous plaît">SVP</abbr> ?</p>
Quand faut-il renseigner l'attribut title ? Ça dépend. Il n'est peut-être pas nécessaire de définir une abrévation comme « SVP » ou lorsqu'une abréviation est utilisée à de nombreuses reprises dans le document. Dans le doute, ajoutez la description complète.
Note : Pour les langues qui possèdent un « nombre » grammatical et notamment celles qui possèdent plus de deux nombres grammaticaux comme l'Arabe, il faudra utiliser le même nombre grammatical dans l'attribut title que celui de l'élément <abbr>.
Grâce à CSS, vous pouvez ajouter, modifier ou retirer les indications visuelles autour de l'abréviation. Généralement, pour une abréviation, le navigateur affichera le contenu de l'attribut title dans une bulle lors du passage de la souris sur le texte de l'abrévation. Pour l'exemple précédent, on aura ce résultat :
Important : Si vous souhaitez que vos lecteurs/visiteurs comprennent l'abréviation à coup sûr, ne comptez pas seulement sur l'attribut title. Épelez l'abréviation dans le texte du document lors de la première occurence. En effet, il faut une souris pour pouvoir activer la bulle d'information qui utilisera le texte de title. Dès lors, les personnes qui utilisent un téléphone, un clavier ou un lecteur d'écran pourront plus difficilement (voire pas du tout) accéder à l'explication si celle-ci n'est présente qu'avec title.
Exercice
Afin de mieux connaître l'élément <abbr>, faisons un léger exercice. Dans le texte qui suit, identifiez les abréviations avec <abbr> et épelez les avec l'attribut title. Une fois que vous avez fini, cliquez sur « Afficher les résultats » pour voir si vous avez tout trouvé. Ces abréviations peuvent être trouvées dans le glossaire.
<div class="exercise"> <main> <div class="instruction">Identifiez toutes les abréviations avec l'élément <code><abbr></code></div> <div class="playground"><textarea spellcheck="false"></textarea></div> <div class="checking"> <button>Afficher les résultats</button><span class="count"></span> </div> <div class="result">Les <abbr title="développeurs">dev</abbr> Web utilisent <abbr title="Hypertext Markup Language">HTML</abbr> pour structurer des documents, <abbr title="Cascading StyleSheet">CSS</abbr> pour les mettre en forme et JavaScript pour ajouter des effets spéciaux grâce à certaines <abbr title="Application Programming Interface">API</abbr> dédiées.</div> </main> </div>
body {
font: 1em/100% sans-serif;
padding: 0;
margin: 0;
}
.exercise {
background: #F9FAFB;
border-radius: 5px;
height: 13em;
overflow: hidden;
}
.instruction, .count {
padding: .5em;
font-style: italic;
font-size: .95em;
}
.playground {
padding: 0 .5em;
}
.playground textarea {
display: block;
font-size : 1em;
line-height: 1.5em;
font-family: monospace;
box-sizing: border-box;
width : 100%;
padding : .5em;
height : 9.7em;
}
.checking {
padding: .5em;
}
.checking button {
box-sizing: border-box;
box-shadow:inset 0 1px 0 0 #bcd9a3;
background:linear-gradient(to bottom, #b4d665 5%, #89a646 100%);
background-color:#b4d665;
border-radius:5px;
border:1px solid #8aa164;
cursor:pointer;
font-size:1em;
padding:.5em;
text-decoration:none;
}
.checking button:hover {
background:linear-gradient(to bottom, #89a646 5%, #b4d665 100%);
background-color:#89a646;
}
.checking button:active {
transform: translate(0, 1px);
}
.result {
height: 10em;
line-height: 1.4em;
padding: .5em;
box-sizing: border-box;
}
main {
transform: translate(0,0);
transition: transform 300ms;
}
.next main {
transform: translate(0, -10em);
}
abbr {
display: inline-block;
white-space: nowrap;
}
abbr.ok {
color: green;
}
abbr.ok:after {
content: ' ✔︎';
}
abbr.fail {
color: red;
}
abbr.fail:after {
content: ' ✘';
}
abbr.warning {
color: orange;
}
abbr.warning:after {
content: ' !';
font-weight: bold;
}
window.addEventListener('load', function () {
var content = document.querySelector('.exercise');
var input = document.querySelector('.playground textarea');
var button = document.querySelector('.checking button');
var message = document.querySelector('.checking .count');
var abbr = Array.prototype.slice.call(document.querySelectorAll('.result abbr'));
var data = {
pass : 0, fail : 0, warning : 0
};
input.value = document.querySelector('.result').textContent;
function toggleResult(e) {
e.preventDefault();
var classList = content.className.split(' ');
if (classList.length === 1 && checkResult()) {
content.className = 'exercise next';
message.innerHTML = data.pass + ' correctement identifiée(s), ' +
data.warning + ' sans description complète, ' +
data.fail + ' manquée(s).';
button.innerHTML = 'Essayez à nouveau';
} else {
content.className = 'exercise';
message.innerHTML = '';
button.innerHTML = 'Afficher les résultats';
}
}
function checkResult() {
var i, j, node = document.createElement('div');
node.innerHTML = input.value;
data = { pass : 0, fail : 0, warning : 0 };
var userAbbr = Array.prototype.slice.call(node.querySelectorAll('abbr'));
if (userAbbr.length === 0) {
alert("Vous n'avez marqué aucune abréviation (il y en a " + abbr.length + " à trouver).");
return false;
}
for (i in abbr) {
var txt = abbr[i].textContent;
var fail = true;
for (j in userAbbr) {
var userText = userAbbr[j].textContent;
if (userText.match(new RegExp('^\\s*' + txt.replace('.','') + '\\s*$'))) {
fail = false;
if (userAbbr[j].title) {
data.pass += 1;
abbr[i].className = 'ok';
} else {
data.warning += 1;
abbr[i].className = 'warning';
}
}
}
if (fail) {
data.fail += 1;
abbr[i].className = 'fail';
}
}
return true;
}
button.addEventListener('click', toggleResult);
});
En savoir plus
- La documentation de la référence sur
<abbr>.