Les listes de définitions : mal utilisées ou mal comprises ?

Date de publication : 24/01/2008

Par Russ Weakley (Max Design)
Joris CROZIER (traducteur)

Cet article est la traduction de Definition lists - misused or misunderstood? qui a pour but de vous montrer l'utilité et le type d'utilisation des listes de définitions.

Version PDF (Miroir) Version hors-ligne (Miroir)

I. Introduction
II. Qu'est-ce que les listes de définitions ?
III. Quand les listes sont-elles appropriées ?
IV. Y'a-t-il des inconvénients à utiliser les listes de définitions ?
V. Personnalisation de listes de définitions
V-1. Liste de définitions sans style
V-2. Liste de définitions avec un style basique
V-3. Liste de définitions avec image de fond
V-4. Liste de définitions sous forme de boîte
V-5. Formater une liste comme un tableau
V-6. Liste flottante avec une image et sa description
V-7. Formater une liste comme une galerie d'images
V-8. Formater comme une liste d'évènements
V-9. Formater comme un tableau à multiples DD
VI. Remerciements

I. Introduction

Qu'est ce que les listes de définitions ? Quand sont elles appropriées ? Et comment les personnaliser pour qu'elles ressemblent à des tableaux, des galeries d'images, des calendriers, etc.

II. Qu'est-ce que les listes de définitions ?

Les listes de définitions sont constituées de deux parties : un terme et une description. Pour écrire une liste de définitions, vous avez besoin de trois éléments HTML :

Un conteneur <dl> ;
Un terme de définition <dt> ;
Une description de définition <dd>.

Par exemple :

Simple liste de définitions


<dl>
  <dt>Grenouille</dt>
  <dd>Chose verte humide</dd>
  <dt>Lapin</dt>
  <dd>Chose chaude et douce</dd>
</dl>

Vous pouvez utiliser une multitude de <dt> et <dd> dans une liste de définitions.

Liste avec plusieurs dd


<dl>
  <dt>Punt</dt>
  <dd>Shooter un ballon</dd>
  <dd>Prendre un paris</dd>
</dl>

Liste avec plusieurs dt


<dl>
  <dt>HTML</dt>
  <dt>XHTML</dt>
  <dd>Tout sauf le CSS</dd>
</dl>

Vous pouvez aussi utiliser des éléments de type bloc dans les descriptions de définitions, comme les balises <p> et <ul>. Par contre, vous ne pouvez pas utiliser d'éléments de type bloc dans les termes de définition.

Liste avec une balise p


<dl>
  <dt>Grenouille</dt>
  <dd><p>Chose verte humide et qui croasse.</p></dd>
</dl>

Liste avec une sous-liste ul


<dl>
  <dt>Grenouille</dt>
  <dd>
    <ul>
      <li>Humide</li>
      <li>Vert</li>
      <li>Croasser</li>
    </ul>
  </dd>
</dl>

III. Quand les listes sont-elles appropriées ?

Il y a deux points de vue à propos de leur utilisation.

Certains pensent qu'elles ne devraient être utilisées que pour des mots et leurs définitions. Et d'autres pensent qu'elles devraient être utilisées pour mettre en évidence les élements directement liés entre eux (comme les couples nom/valeur).

Le deuxième point de vue est appuyé d'un exemple qui respecte les normes du W3C.

Une autre application des listes de définitions, par exemple, est la mise en évidence de dialogues avec les balises <dt> désignant l'orateur, et les balises <dd>, ses propos.

Les listes dans les documents HTML

Bien que certains ne soient pas d'accord avec cet exemple, il suggère que les listes de définitions peuvent être utilisées au delà du simple fait terme - définition, du moment qu'il y a une relation entre chaque éléments. Suivant cet argument, tous les exemples ci-dessous peuvent être mis en évidence à l'aide de listes de définitions :

DT: Orateur
DD: Citation

DT: Image
      DD: Description
      DD: Localisation
      DD: Photographe

DT: Terme
DD: Image descriptive
DD: Description

DT: Site web (lien)
DD: Description

DT: Date
DD: Évênement

DT: Évênement
      DD: Date
      DD: Description
      DD: Lieu

DT: Lien interne
      DD: Accueil
      DD: Section 1
      DD: Section 2

DT: Liens externes
DD: Lien externe 1
DD: Lien externe 2

IV. Y'a-t-il des inconvénients à utiliser les listes de définitions ?

Avant de les utiliser, vous devez être conscient que ce n'est pas la meilleure option dans tous les cas.

Le <dt> ne peut pas contenir d'éléments de type bloc, et plus particulièrement les <hN> (exemple : h1). Si le contenu d'un <dt> ne peut pas être marqué comme un titre, dans ce cas, il ne peut pas avoir la même importance dans la hiérarchie du document. De même, Google et d'autres moteurs de recherche ne référenceront pas les listes de définitions comme d'autres pages basées sur le système de titrage.

Bien que les listes de définitions puissent être formatées pour ressembler aux données tabulaires, elles ne peuvent pas contenir des caractéristiques d'accessibilités comme les étiquettes (label) et les titres (h1, etc.) pour lier les informations entre elles. C'est pourquoi, elles ne devraient pas être utilisées pour remplacer des données tabulaires complexes.

V. Personnalisation de listes de définitions

Voici des exemples de personnalisation :

V-1. Liste de définitions sans style

Code (X)HTML


<dl>
  <dt>Grenouille verte et jaune</dt>
  <dd>Nisl ut aliquip ex ea commodo consequat</dd>
  <dt>Crapaud buffle</dt>
  <dd>Lorem ipsum dolor sit amet elit...</dd>
  <dt>Grenouille tachetée</dt>
  <dd>Facilisis at vero eros et accumsan</dd>
</dl>

Liste de définitions sans styles

V-2. Liste de définitions avec un style basique

Code (X)HTML


<dl class="margins-removed">
  <dt>Grenouille verte et jaune</dt>
  <dd>Nisl ut aliquip ex ea commodo consequat</dd>
  <dt>Crapaud buffle</dt>
  <dd>Lorem ipsum dolor sit amet elit...</dd>
  <dt>Grenouille tachetée</dt>
  <dd>Facilisis at vero eros et accumsan</dd>
</dl>

Code CSS


 dl.margins-removed
{
  margin: 0;
  padding: 0;
}

.margins-removed dt
{
  margin: 0;
  padding: 0;
  font-weight: bold;
}

.margins-removed dd
{
  margin: 0 0 1em 0;
  padding: 0;
}

Liste de définitions sans marge

V-3. Liste de définitions avec image de fond

Code (X)HTML


<dl class="background-image">
  <dt>Grenouille verte et jaune</dt>
  <dd>Nisl ut aliquip ex ea commodo consequat</dd>
  <dt>Crapaud buffle</dt>
  <dd>Lorem ipsum dolor sit amet elit...</dd>
  <dt>Grenouille tachetée</dt>
  <dd>Facilisis at vero eros et accumsan</dd>
</dl>

Code CSS


.background-image dt
{
  color: #000;
  font-weight: bold;
  padding: 0;
}

.background-image dd
{
  margin: 0 0 1em 0;
  padding: 0 0 0 10px;
  background-image: url('arrow.gif');
  background-repeat: no-repeat;
  background-position: 0 .5em;
}

<dd> avec une image de fond

V-4. Liste de définitions sous forme de boîte

Code (X)HTML


<dl class="border-around">
  <dt>Grenouille verte et jaune</dt>
  <dd>Nisl ut aliquip ex ea commodo consequat</dd>
  <dt>Crapaud buffle</dt>
  <dd>Lorem ipsum dolor sit amet elit...</dd>
  <dt>Grenouille tachetée</dt>
  <dd>Facilisis at vero eros et accumsan</dd>
</dl>

Code CSS


dl.border-around
{
  margin: 2em 0;
  padding: 0;
  width: 20em;
}

.border-around dt
{
  background-color: #131210;
  color: #959289;
  padding: .5em .5em;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  border-left: 1px solid #131210;
  border-right: 1px solid #131210;
  border-top: 1px solid #131210;
}

.border-around dd
{
  margin: 0 0 1em 0;
  background: #DBD8D8;
  text-align: center;
  padding: 1em .5em;
  font-style: italic;
  border-left: 1px solid #131210;
  border-right: 1px solid #131210;
  border-bottom: 1px solid #131210;
}

Liste de définitions sous forme de boite

V-5. Formater une liste comme un tableau

Code (X)HTML


<dl class="table-display">
  <dt>Grenouille verte et jaune</dt>
  <dd>Nisl ut aliquip ex ea commodo consequat</dd>
  <dt>Crapaud buffle</dt>
  <dd>Lorem ipsum dolor sit amet elit...</dd>
  <dt>Grenouille tachetée</dt>
  <dd>Facilisis at vero eros et accumsan</dd>
</dl>

Code CSS


dl.table-display
{
  width: 41.1em;
  margin: 2em 0;
  padding: 0;
  font-family: georgia, times, serif;
}

.table-display dt
{
  width: 15em;
  float: left;
  margin: 0 0 0 0;
  padding: .5em;
  border-top: 1px solid #999;
  font-weight: bold;
}

/* commented backslash hack for mac-ie5 \*/
dt { clear: both; }
/* end hack */

.table-display dd
{
  float: left;
  width: 24em;
  margin: 0 0 0 0;
  padding: .5em;
  border-top: 1px solid #999;
}

Représentation tabulaire

V-6. Liste flottante avec une image et sa description

Code (X)HTML


<dl class="float-right">
  <dt>Fleur de Banksia</dt>
  <dd><img src="flower.jpg" alt=""></dd>
  <dd><em>Banksius maximus</em></dd>
  <dd>On la trouve au large des côtes australiennes</dd>
</dl>

Code CSS


dl.float-right
{
  border: 1px solid #000;
  background-color: #ddd;
  width: 142px;
  text-align: center;
  padding: 0 0 10px 0;
  float: right;
  margin: 0 0 1em 1em;
}

.float-right dt
{
  font-weight: bold;
  background-color: #131210;
  color: #959289;
  padding: 5px 10px;
  margin-bottom: 10px;
}

.float-right dd img
{
  border: 1px solid #000;
  width: 100px;
  height: 100px;
}

.float-right dd
{
  margin: 0;
  padding: 0 10px 5px 10px;
  font-size: 85%;
}

Liste de définitions floatante avec une image et sa description

V-7. Formater une liste comme une galerie d'images

Code (X)HTML


<dl class="gallery">
  <dt><img src="flower.jpg" alt=""></dt>
  <dt>Ici le titre</dt>
  <dd>Ici la description</dd>
</dl>
<dl class="gallery">
  <dt><img src="flower2.jpg" alt=""></dt>
  <dt>Ici le titre</dt>
  <dd>Ici la description</dd>
</dl>
<dl class="gallery">
  <dt><img src="flower3.jpg" alt=""></dt>
  <dt>Ici le titre</dt>
  <dd>Ici la description</dd>
</dl>

Code CSS


dl.gallery
{
  border: 1px solid #000;
  background-color: #ddd;
  width: 102px;
  text-align: center;
  padding: 10px;
  float: left;
  margin-right: 1em;
}

.gallery dt { font-weight: bold; }

.gallery dt img
{
  border: 1px solid #000;
  width: 100px;
  height: 100px;
}

.gallery dd
{
  margin: 0;
  padding: 0;
}

Liste de définitions sous forme de galerie d'images

V-8. Formater comme une liste d'évènements

Code (X)HTML


<dl class="event">
  <dt>23 March</dt>
  <dd>Rencontre du club automobile</dd>
  <dd>19h00</dd>
  <dd>
    Voir une large gamme de voitures classiques, le tout en un seul lieu. Il y 
    aura aussi des ballons, des clowns, châteaux gonflables et de la nourriture. 
    Du plaisir pour toute la famille.
  </dd>
  <dt>13 June</dt>
  <dd>Foire aux gâteau</dd>
  <dd>12h00</dd>
  <dd>Gâteaux de toutes sortes. Tous les fonds recueillis sont versés à la fondation "Minky Whale".</dd>
</dl>

Code CSS


dl.event
{
  margin: 2em 0;
  padding: 0;
  font-family: georgia, times, serif;
}

.event dt
{
  position: relative;
  left: 0;
  top: 1.1em;
  width: 5em;
  font-weight: bold;
}

.event dd
{
  border-left: 1px solid #000;
  margin: 0 0 0 6em;
  padding: 0 0 .5em .5em;
}

Liste sous forme de calendrier d'évènements

V-9. Formater comme un tableau à multiples DD

Code (X)HTML


<dl>
  <dt>Grenouille verte et jaune</dt>
  <dd class="first">Nisl ut aliquip ex ea commodo consequat</dd>
  <dd>Lorem ipsum dolor sit amet elit, sed diam nonummy nibh euismod tincidunt</dd>
  <dt>Crapaud buffle</dt>
  <dd class="first">Lorem ipsum dolor sit amet elit, sed diam nonummy nibh euismod tincidunt</dd>
  <dd>Nisl ut aliquip ex ea commodo consequat</dd>
</dl>

Code CSS


dl { border-bottom: 1px solid #999; }

dt
{
  width: 15em;
  padding: .5em;
  float: left;
  margin: 0;
  border-top: 1px solid #999;
  font-weight: bold;
}

dd
{
  margin-left: 16em;
  padding: .5em;
}

dd.first { border-top: 1px solid #999; }

Liste sous forme d'un tableau à plusieurs <dd>

VI. Remerciements

Tous mes remerciements à olsimare et troumad pour leur relecture.

Version PDF (Miroir) Version hors-ligne (Miroir)

(1)	Cet article a été publié à l'origine le 27 Janvier 2004 et est encore visible à l'adresse suivante : Definition lists - misused or misunderstood ?

Copyright © 2008 Russ Weakley. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 E de dommages et intérêts. Cette page est déposée à la SACD.