Comment utiliser les listes de définitions ?

28 Déc 09

Je n’ai pas la prétention de répondre à cette question, mais j’aimerai vous faire partager mon interrogation. Si je relis les recommandations HTML 4.01 du W3C (Definition lists: the DL, DT, and DD elements), voilà ce qui est dit à ce sujet :

Les listes de définitions ne varient que légèrement par rapport à d’autres types de listes, ce type de liste est composé de deux parties : un terme et une description.

L’utilisation la plus appropriée est donc celle où un mot ou une expression : <dt> serait défini par une courte explication : <dd>, comme dans un dictionnaire ou un glossaire, par exemple.

Mais si nous allons plus loin, les recommandations donnent également l’exemple d’un dialogue ou le personnage serait défini par la balise <dt> et son dialogue par la balise : <dd>, mais uniquement dans les recommandations de html 4.01 et xhtml 1.0. Dans html 5, les listes de définitions ne doivent pas servir à mettre en forme un dialogue, puisqu’initialement la balise : <dialog> devait servir à cet effet. Cette balise ayant été retirée en septembre dernier sans être (encore ?) remplacée. On reste dans l’expectative…

Concrètement, quel usage est-il fait de la liste de définition dans les sites que nous consultons tous les jours ? Est-ce qu’une liste de diffusion peut être utilisée pour un menu de navigation ? A mon sens non, puisqu’il existe les listes ordonnées : <ol> et non ordonnées : <ul> qui me semblent plus appropriées. Est-ce qu’une liste de diffusion peut remplacer un titre : <dt> = <h1> et un paragraphe : <dd> = <p> ? Réponse : non, mais c’est souvent la solution que nous avons trouvé pour répondre aux demandes des services chargés du référencement qui souhaitaient structurer les pages des sites avec des balises : <h1> à <h6> mais éviter certaines parties annexes dans les plans de document (mise en avant de promotions, services, etc.)

La seule utilisation parfaitement adaptée que j’ai pu trouver pour ces balises (hormis les exemples donnés par le W3C) concerne la structuration d’une FAQ. <dt> pour la question et <dd> pour la réponse.

Est-ce qu’il ne faudrait pas créer un autre type de liste qui conviendrait mieux pour mettre en relation deux éléments comme acteur/personnage, auteur/titre de livre, action/résultat, etc. ? Ce qui, selon moi, n’est manifestement pas le rôle de la liste de définition telle qu’elle a été « pensée » initialement.

20 commentaires

Flux RSS des commentaires de cet article

Je ne vois pas trop l’intérêt d’ajouter un autre type de liste associative, vu que <dl>/<dt>/<dd> remplissent déjà bien ce rôle. On parle toujours de sémantique des balises, alors qu’il n’y a a pas tant que ça si on respecte les définitions à la lettre et surtout pour quels usage derrière ?

On le voit bien avec les microformats ou RDFa, il faut de toute façon ajouter de l’information au HTML pour qu’il soit vraiment sémantique et qu’on puisse en tirer quelque chose ensuite. HTML est un langage de structure générique assez pauvre et les structures proposées ne sont pas assez nombreuses pour pouvoir définir tous les cas de figure de toute manière.

Je serais plutôt de l’avis de commencer par standardiser certains noms de classe (comme dialog, faq, glossary, etc.) quitte à ensuite en faire de nouvelles balises si il y a un véritable intérêt derrière. C’est un peu ce qui a été fait pour header, nav, footer qui sont devenus des éléments à part entière dans HTML5.

Le 28 Déc. 2009 à 16h29 par Frank Taillandier

Je m’intéresse aussi beaucoup aux listes de définitions et cet article fait écho à ma réflexion…

D’abord je les utilise pour, euh, lister quelques définitions.

* Entièrement d’accord pour les FAQs : je n’imagine même pas qu’on puisse utiliser un autre balisage tellement ça tombe sous le sens. C’est concrétisé dans mon plugin SPIP : « Définitions et FAQ ».

* Je les utilise aussi pour, euh, lister des définitions, tout simplement, comme ici ;-)

* Elles servent aussi pour associer une illustration (dt), son titre (dt) et sa légende (dd), ce qui est un usage pas si détourné qu’il en a l’air (avez-vous plus adéquat ?)…

Par contre, je ne vois pas pourquoi il faudrait créer un autre type de liste liant des paires…

Le 28 Déc. 2009 à 20h51 par tetue

Je sais, il ne s’agit pas de web sémantique, mais les listes de définition sont bien utiles pour répondre à un besoin très concret : la création dynamique de « boîtes » dans un outil de gestion de contenu (CMS). La balise dt contient alors le titre de la boîte, et la balise dd contient le corps de la boîte. Ce type de structure est particulièrement facile à mettre en page avec des règles de style (CSS). Lorsqu’il s’applique aux boîtes placées sur le côté des pages, et non au contenu principal, il n’interfère pas avec la structure sémantique du contenu (h1 à h6), ce qui est un autre avantage. L’idée d’utiliser des listes de définition pour structurer et formater des « boîtes » revient à Mozilla, qui l’utilisa abondamment il y a quelques années sur le site dédié à Firefox. Cette bonne pratique a été complétement intégrée dans le projet yacs, qui produit l’outil de gestion de contenu du même nom. Il existe sans doute d’autres outils qui font de même.

Le 29 Déc. 2009 à 10h24 par Bernard Paques

Moi je suis un cancre (je ne lis pas les specs) mais c’est vrai que les listes de définitions, je n’ai jamais su trop bien comment les utiliser. Souvent un <ul> un peu chargé faisait très bien l’affaire. Ou dans le cas des FAQ, des headings et des paragraphes. Aujourd’hui, je n’utilise d’ailleurs plus du tout <dl> (je m’en rends compte en écrivant ces lignes)…

PS HS: je suis décidément amoureux de cette nouvelle skin, un petit bouton de prévisualisation des coms et ce sera parfait ! (la cerise, le gâteau, tout ça)

Le 29 Déc. 2009 à 14h24 par STPo

… ça éviterait les surprises dans le rendu des coms, comme ci-dessus ! =)

Le 29 Déc. 2009 à 14h25 par STPo

Une subtilité de la liste de définition, les cas suivants sont autorisés:

* dt/dd : un terme et une définition,
* dt-dt/dd : plusieurs termes pour une seule définition,
* dt/dd-dd : plusieurs définitions pour un seul terme.

Le 29 Déc. 2009 à 15h56 par karl

Tout à fait d’accord avec Tétue : un usage intéressant des dl est celui qui permet d’ajouter une légende à des images en évitant un div ou un span bien moins sémantiques.
Quant à une nouvelle balise, je ne suis pas sûr. Ou alors si on va dans ce sens, il y en a d’autres qu’il faudrait rajouter (mais je crois qu’en HTML5 il y a eu déjà des ajouts intéressants :) )

Le 08 Jan. 2010 à 13h59 par GuB

Une autre utilisation possible, pourrait être de lister le contenu d’un dossier (<dt> pour le dossier et <dd> pour les fichiers)…

Je serais plutôt de l’avis de commencer par standardiser certains noms de classe (comme dialog, faq, glossary, etc.) quitte à ensuite en faire de nouvelles balises si il y a un véritable intérêt derrière. C’est un peu ce qui a été fait pour header, nav, footer qui sont devenus des éléments à part entière dans HTML5.

Entièrement d’accord. Rien à ajouter.

Le 02 Fév. 2010 à 15h55 par Jerry Wham

Les éléments <dt> et <dd> sont aussi utilisés par Zend Framework comme décorateur pour les formulaires. Le premier englobe le <label> et le second le <input>. Personnellement je ne trouve pas cela sémantique mais c’est le comportement utilisé par défaut.

Le 28 Fév. 2010 à 22h58 par Florian Sey

J’aime beaucoup les listes de définition, mais le problème majeur que j’y trouve est qu’elles ne peuvent pas être structurées en groupes logiques.

Dans l’état actuel des choses, les groupes « terme(s) + définition(s) » se comportent à mon avis plus comme du HTML (vs. XHTML), par exemple :

<li>item 1
<li>item 2
etc.

Pouvoir écrire ce genre de chose serait tout bonnement fantastique à mon avis :

<dl>
  <group>
    <dt>terme 1</dt>
    <dd>définition 1.1</dd>
    <dd>définition 1.2</dd>
  </group>
  <group>
    <dt>terme 2</dt>
    <dd>définition 2.1</dd>
  </group>
</dl>

D’un point de vue de l’utilisation des CSS, il serait parfois tellement plus facile de pouvoir utiliser ces groupes logiques.

Le 10 Mar. 2010 à 09h20 par an.archi

(sinon, pareil que STPo pour la prévisualisation. :) )

Le 10 Mar. 2010 à 09h22 par an.archi

D’accord avec toi an.archi, il m’est d’ailleurs arrivé de faire ceci pour grouper les définitions :

<dl>
  <dt>Terme 1</dt>
  <dd>
    <ul>
      <li>Définition 1.1</li>
      <li>Définition 1.2</li>
    </ul>
  </dd>
  <dt>Terme 2</dt>
  <dd>
    <ul>
      <li>Définition 2.1</li>
      <li>Définition 2.2</li>
    </ul>
  </dd>
</dl>

Mais c’est loin d’être parfait.

Le 10 Mar. 2010 à 11h41 par Pierre Bertet

Il faut arrêter de polémiquer autour de la balise <dl>. La documentation HTML 4.01 n’était pas claire à son sujet, ce ne sera bientôt qu’un mauvais souvenir.

Name (dt) / value (dd) groups may be terms and definitions, metadata topics and values, or any other groups of name-value data

A partir du moment où une (ou plusieurs) information(s) peuvent être rattachée(s) à un (ou plusieurs) élément(s) précis (uniques ?), la sémantique de la balise est, à mon sens, respectée.

Personnellement, j’utilise <dl> pour baliser :
– des coordonnées (dt : nom société, dd : informations composant l’adresse),
– une fiche produit (dt : nom du produit, dd : caractéristiques du produit),
– une galerie photo,
– etc.

Cette balise est devenue pour moi une alternative au classique <hn> / <p> pour quasiment tout ce qui ne concerne pas un contenu textuel « pur ».

Le 13 Avr. 2010 à 12h18 par BeliG

Les DL en HTML4, c’est: 1) mal défini et 2) pas d’une utilité flagrante. Du coup, certains zappent complètement cet élément et d’autres en abusent en recherche de Révélation Sémantique™. Je soupçonne les premiers d’être plus raisonnables que les seconds.

Concrètement, soit les UA ignorent royalement les DL, et dans ce cas on peut s’en passer totalement sans souci, ou à l’inverse les utiliser de n’importe quelle manière, ça n’a pas d’impact. Soit les UA les exploitent et dans ce cas il faut savoir comment et voir si tel ou tel usage est pertinent en fonction de ça. Par exemple, on peut vouloir éviter de donner des informations trompeuses ou sources de confusion à un utilisateur de lecteur d’écran à cause d’une utilisation abusive de DL.

(Pour ma part je me méfie de toutes les utilisations qui consistent à placer un contenu volumineux dans un élément de liste, que ce soit un LI, un DT ou un DD. Pour une FAQ avec des réponses sur plusieurs paragraphes, j’aurais tendance à utiliser HN + P.)

Enfin bref, ça c’est HTML4, et c’est le bazar.

HTML5, à ce que j’ai lu de la spec, recycle DT et DD comme mécanisme pour associer une «clé» à une «valeur». L’élément DL correspond d’ailleurs en HTML5 à une Description List, pas une Definition List. Mais c’est un peu mouvant (DT et DD, sans DL parent, étaient un moment proposés pour baliser le contenu d’un élément FIGURE, mais ça a été modifié au profit d’un élément FIGCAPTION, et ça peut encore bouger). Ceci dit, si ça reste tel quel (Description List), je me vois bien marquer avec un DL des données de type nom/valeur, par exemple une liste de données EXIF ou autres métadonnées.

Quant à DIALOG, il a été fort logiquement sabré de HTML5, et je doute qu’on le revoie. Bon débarras. Si vous voulez baliser un dialogue, ou un poème, ou une recette de cuisine, ou tout autre contenu ayant une structure «standardisable», il faut regarder du côté des microformats ou de RDFa, mais certainement pas de la création d’éléments HTML spécifiques à un type de contenu marginal.

Le 17 Avr. 2010 à 20h03 par Florent V.

A partir du moment où une (ou plusieurs) information(s) peuvent être rattachée(s) à un (ou plusieurs) élément(s) précis (uniques ?),

Le 04 Juin. 2010 à 08h34 par welding rod

la sémantique de la balise est, à mon sens, respectée.

Le 04 Juin. 2010 à 08h34 par welding electrode

Personnellement j’ai trouvé ces balises idéales pour gérer des accordéons: la balise DL défini un accordéon, DT déclare un pli et DD contient le pli en question.

Le 13 Juin. 2010 à 22h12 par Maxxoo

Les balises DL sont avant tout des listes de définition, donc à privilégier pour une FAQ ou pour un glossaire. De plus, elle semble pris en compte par google pour le référencement des définitions – lorsque l’on tape « définition [mot-clé] ».
Un regain d’activité est prévu sur ce blog ? Le contenu y est vraiment intéressant !

Le 02 Juil. 2010 à 03h22 par Agence Wype