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
Sélectionnez

<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
Sélectionnez

<dl>
  <dt>Punt</dt>
  <dd>Shooter un ballon</dd>
  <dd>Prendre un paris</dd>
</dl>            
            
Liste avec plusieurs dt
Sélectionnez

<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
Sélectionnez

<dl>
  <dt>Grenouille</dt>
  <dd><p>Chose verte humide et qui croasse.</p></dd>
</dl>            
            
Liste avec une sous-liste ul
Sélectionnez

<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
Sélectionnez

<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
Sélectionnez

<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
Sélectionnez

 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
Sélectionnez

<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
Sélectionnez

.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
Sélectionnez

<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
Sélectionnez

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
Sélectionnez

<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
Sélectionnez

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
Sélectionnez

<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
Sélectionnez

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
Sélectionnez

<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
Sélectionnez

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
Sélectionnez

<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
Sélectionnez

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
Sélectionnez

<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
Sélectionnez

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.