IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

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

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.

Cet article a été publié à l'origine le 27 janvier 2004 et est visible à l'adresse suivante : Definition lists - misused or misunderstood ? ♪

Article lu   fois.

Les deux auteurs

Site personnel

Profil Pro

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

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 éléments 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.

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ément. 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-A. 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>

V-B. 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;
}

V-C. 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;
}

V-D. Liste de définitions sous forme de boite

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;
}

V-E. 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;
}

V-F. 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%;
}

V-G. 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;
}

V-H. 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âteaux</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;
}

V-I. 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; }

VI. Remerciements

Tous mes remerciements à olsimare et troumad pour leur relecture.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

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