Les listes de définition : le parent pauvre du (X)HTML

Les listes de définition sont généralement très peu utilisé sur les sites Web. On ne trouve pas cette fonctionnalité dans les différents éditeurs WYSIWYG du marché (TinyMCE, FCKEditor, ..) . Alors qu’elle peuvent apporter une réel information sémantique au document.

L’origine du mal vient certaine du nommage de cette fonctionnalité qui sous-entend implicitement que les balises dl, dd; et dt servent uniquement à la création de liste composé d’un terme et de sa définition à la manière d’un dictionnaire.

<dl>
    <dt>Mot 1</dt>
    <dd>première définition du mot 1.</dd>
    <dd>seconde définition du mot 1.</dd>
    <dt>Mot 2</dt>
    <dd>définition du mot 2.</dd>
</dl>

Mais en fait, la porté sémantique de ce groupes de balises est beaucoup plus important.

Quand utiliser les listes de définitions ?

La définition initiale donné par le W3C était plutot vague. L’ambiguité à été levé dans les derniers brouillons du html 5, pour en donner la définition suivante :

The dl element represents an association list consisting of zero or more name-value groups (a description list). Each group must consist of one or more names (dt elements) followed by one or more values (dd elements).

Name-value groups may be terms and definitions, metadata topics and values, or any other groups of name-value data.

The values within a group are alternatives; multiple paragraphs forming part of the same value must all be given within the same dd element.

The order of the list of groups, and of the names and values within each group, may be significant.

A partir de la, il est possible et même recommandé de baliser des listes de tous types où la référence à un ou plusieurs termes (dt) est nécessaire à la compréhension de la liste d’élément qui suit (dd), dont voici quelques schémas possible.

<dl>
    <dt>Orateur 1</dt>
    <dd>Citation 1</dd>
    <dd>Citation 2</dd>
    <dt>Orateur 2</dt>
    <dd>Citation 1</dd>
    <dd>Citation 2</dd>
</dl>
<dl>
    <dt>Image</dt>
    <dd>Description</dd>
    <dd>Localisation</dd>
    <dd>Photographe</dd>
</dl>


<dl>
    <dt>Terme</dt>
    <dd>Image descriptive</dd>
    <dd>Description</dd>
</dl>


<dl>
    <dt>Évênement</dt>
    <dd>Date</dd>
    <dd>Description</dd>
    <dd>Lieu</dd>
</dl>


<dl>
    <dt>Adresses</dt>
    <dd>RAISON SOCIALE ou DENOMINATION</dd>
    <dd>IDENTITE DU DESTINATAIRE et/ou SERVICE</dd>
    <dd>ENTREE-BATIMENT-IMMEUBLE-RES-ZI</dd>
    <dd>NUMERO-LIBELLE DE LA VOIE</dd>
    <dd>MENTION SPECIALE et COMMUNE GEOGRAPHIQUE</dd>
    <dd>CODE POSTAL et LOCALITE DE DESTINATION ou CODE CEDEX et LIBELLE CEDEX</dd>
</dl>

Que dit le RGAA à ce sujet ?

Le point de contrôle 3.6 :Utilisé les listes de manière approprié donne une définition plutot vague :

Les listes de définitions ( dl) doivent être utilisées pour les énumérations de termes suivis chacun d’une définition, et non pour structurer de manière plus générique un contenu qui serait alors privé d’éléments plus significatifs tels les titres hiérarchiques, les regroupement fieldset ou les tableaux de données.

Mais les exemples donnés par la suite montre qu’il n’ont visiblement pas pris en compte (ou pas voulu prendre en compte du fait de l’impossibilité de générer via un éditeur WYSIWYG), la porté sémantique des listes de définitions :

<p>Ingrédients :</p>
<ul>
    <li>farine</li>
    <li>oeufs</li>
    <li>lait</li>
</ul>

<p>Préparation :</p>
<ol>
    <li>verser la farine dans un saladier</li>
    <li>y casser les oeufs</li>
    <li>incorporer progressivement le lait en mélangeant</li>
</ol>

Ces 2 exemples sont des cas typiques d’utilisations des listes de définitions, on voit bien dans ces 2 exemples que rien ne relie syntaxiquement le contenu présent dans <p> à la liste définit par après. Pour introduire cette relation il aurait fallu écrire :

<dl>
    <dt>Ingrédients : </dt>
    <dd>farine</dd>
    <dd>oeufs</dd>
    <dd>lait</dd>
</dl>
<dl>
    <dt>Préparation :</dt>
    <dd>verser la farine dans un saladier</dd>
    <dd>y casser les oeufs</dd>
    <dd>incorporer progressivement le lait en mélangeant</dd>
</dl>

On voit bien dans ce cas la relation entre le terme Ingrédients et farine, oeufs et laits (idem pour le second exemple).

Heureusement, le test de vérification du RGAA ne vient pas remettre en cause ce principe, seuls les exemples sont mal chosis.

LinkedIn
Reddit
A la une
  • Rencontre du numérique 2019 - Nîmes
  • référencement naturel d'un hôtel
  • Développeur eZ Platform
  • Tech lead Symfony
  • Expert Qualité Web

Copyright - Sylvain FIX

2009 - 2019