HTML fournit plusieurs méthodes pour décrire la sémantique du contenu qu'on emploie (que ce soit intégré dans le texte ou dans un glossaire à part). Dans cet article, nous verrons comment correctement définir les termes utilisés au sein d'un document.
| Prérequis : | Vous devez au préalable savoir comment créer un document HTML simple. |
|---|---|
| Objectifs : | Apprendre comment introduire de nouveaux mots-clés et comment construire une liste de définitions. |
Lorsqu'on souhaite définir un terme, on utilise généralement un dictionnaire ou un glossaire. Les dictionnaires et glossaires permettent d'associer formellement des termes clés avec une ou plusieurs descriptions. Par exemple :
- Bleu (adjectif)
- La couleur du ciel lors d'un temps clair.
Le ciel est bleu.- Se dit d'une viande lorsqu'elle est saisie rapidement, au grill, de chaque côté.
Un steak bleu s'il vous plaît.
Mais il arrive fréquemment qu'on définisse des termes de façon moins formelle, comme ici :
Firefox est le navigateur web créé et développé par la Fondation Mozilla.
Pour gérer ces différents cas d'utilisation, HTML fournit différents éléments qui permettent de marquer les termes définis et leurs descriptions afin que vos lecteurs puissent utiliser ces informations.
Comment écrire un description informelle
Dans certains manuels, à la première occurence d'un terme, celui-ci est placé en gras et défini immédiatement.
On peut procéder de cette façon avec HTML. En revanche, HTML ne gère pas l'aspect visuel d'un document, uniquement son contenu. On utilisera l'élément <dfn> qui permet d'identifier la première occurence d'un terme. Attention, <dfn> enveloppe le terme à définir et pas sa définition (qui elle s'étend sur le paragraphe courant) :
<p><dfn>Firefox</dfn> est le navigateur créé et développé par la Fondation Mozilla.</p>
Note : On utilise également parfois le gras pour mettre en avant du contenu. Le gras, en tant que tel, est un concept qui n'appartient pas à HTML mais à la mise en forme. En revanche, pour mettre en avant (utiliser une emphase), il existe des éléments HTML tout indiqués.
Cas spécifique : les abréviations
En ce qui concerne les abréviations, il est préférable de les identifier séparement grâce à l'élément <abbr> afin que les lecteurs d'écrans puissent les utiliser correctement. Comme pour la définition d'un nouveau terme, une abréviation doit être définie lors de sa première apparition.
<p> <dfn><abbr>HTML</abbr> (hypertext markup language)</dfn> est un langage de description utilisé pour structurer des documents sur le Web. </p>
La spécification HTML met en avant l'attribut title pour expliciter les termes de l'abréviation. Cependant, il reste nécessaire d'utiliser le texte classique pour fournir une explication car le contenu de l'attribut title ne sera pas montré aux utilisateurs, sauf si ceux-ci passent la souris au-dessus de l'abréviation. C'est également ce qui est noté dans les spécifications.
Améliorer l'accessibilité
<dfn> identifie le terme qui est défini et indique que le paragraphe courant définit le terme. Il y a donc une relation implicite entre l'élément <dfn> et l'élément qui le contient. Si vous souhaitez avoir une relation plus formelle ou que votre définition ne s'étend que sur une ou plusieurs phrases plutôt que sur l'ensemble du paragraphe, vous pouvez utiliser l'attribut aria-discribedby pour associer, formellement, un terme à sa définition :
<p>
<span id="ff">
<dfn aria-describedby="ff">Firefox</dfn>
est le navigateur web créé et développé par la Fondation Mozilla.
</span>
Vous pouvez le télécharger sur <a href="https://www.mozilla.org">mozilla.org</a>
</p>
Les technologies d'assistance à la navigation pourront tirer parti de cet attribut pour fournir un texte alternatif pour un terme donné. aria-describedby peut être utilisé pour n'importe quelle balise contenant un mot-clé à définir (il n'est pas nécessaire que ce soit <dfn>). aria-describedby utilise un référence à l'id de l'élément qui contient la description.
Comment construire une liste de descriptions
Les listes de descriptions sont des listes de termes associés à leur description (par exemple une liste de définition, des entrées d'un dictionnaire, une FAQ, des paires de clés-valeurs, etc.).
Les listes de descriptions ne doivent pas être utilisées pour retranscrire des dialogues. En effet, la conversation ne décrit pas les différents interlocuteurs. Voici quelques recommandations pour retranscrire un dialogue dans un document web.
Les termes à décrire sont placés dans des éléments <dt> et la description, qui suit immédiatement, est placée dans un ou plusieurs éléments <dd>. Enfin, l'ensemble de la liste est placé au sein d'un élément <dl>.
Un exemple simple
Voici un exemple simple qui dresse une liste de descriptions de plats :
<dl>
<dt>jambalaya</dt>
<dd>
une entrée à base de riz qui contient généralement
du poulet, des saucisses, des fruits de mer et des
épices
</dd>
<dt>sukiyaki</dt>
<dd>
une spécialité japonaise à base de fines tranches de
viande, de légumes, de nouilles et qui est cuite dans
un sauce soja et du saké
</dd>
<dt>chianti</dt>
<dd>
un vin italien, sec, originaire de Toscane
</dd>
</dl>
La structure de base qu'on voit dans cet exemple alterne les termes (<dt>) et leurs descriptions (<dd>). Si deux (ou plusieurs) termes apparaissent les uns à la suite des autres, la description qui suit s'appliquera à tout ces termes. Si deux (ou plusieurs) descriptions se suivent, elles s'appliqueront au dernier terme.
Améliorer l'aspect visuel
Voici comment un navigateur affichera la liste précédente :
Si vous souhaitez que les termes soient plus visibles, vous pouvez les écrire en gras. Cela ne change rien au contenu, donc ce ne sera pas HTML qui sera utilisé. En revanche, cela modifie la mise en forme et nous allons donc utiliser CSS et plus particulièrement la propriété font-weight :
dt {
font-weight: bold;
}
Cela permettra d'obtenir le résultat suivant :