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

Par Russ Weakley

Les listes de définitions, qu'est-ce que c'est ? Quand faut-il les utiliser ? Et comment les styler pour qu'elles ressemblent à des tableaux, des galeries d'images, des calendriers, etc.

Les listes de définitions, qu'est-ce que c'est ?

Les listes de définitions comportent deux parties, un terme et une description. Pour marquer une liste de définitions, il vous faut trois éléments HTML : un <dl> conteneur, un terme de définition <dt>, et une description de définition <dd>. Par exemple :

<dl>
    <dt>Grenouille</dt>
    <dd>Truc vert humide</dd>
    <dt>Lapin</dt>
    <dd>Truc chaud et doux</dd>

</dl>

Vous pouvez utiliser plusieurs <dt> et <dd> dans la même liste de définitions :

<dl>
    <dt>Pointer</dt>
    <dd>Viser à la pétanque</dd>
    <dd>Marquer comme fait</dd>

</dl>

<dl>
    <dt>Fordisme</dt>
    <dt>Taylorisme</dt>
    <dd>Tout sauf des vacances<dd>
</dl>

Vous pouvez aussi utiliser des éléments de type bloc dans une description de définition, comme un <p> ou un <ul>. Vous ne pouvez pas utiliser d'éléments de type bloc dans un terme de définition.

<dl>
    <dt>Grenouille</dt>
    <dd><p>Truc vert humide et qui croasse.</p></dd>
</dl>

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

</dl>

Quand les listes de définitions sont-elles appropriées ?

Il y a deux points de vue quant à l'usage des listes de définitions. Certaines personnes pensent qu'elles ne doivent être utilisées que pour lister des mots et leurs définitions. D'autres disent que ces listes peuvent être utilisées pour relier des éléments entre lesquels existe une relation directe (une paire nom/valeur). Ce deuxième point de vue s'appuie sur un exemple de la spécification du W3C :

Une autre application de l'élément DL serait, par exemple, pour le marquage d'un dialogue, chacun des éléments DT nommant un personnage et chacun des éléments DD en contenant les paroles. (VO - VF)

Bien que certains soient en désaccord avec cet exemple, il suggère que les listes de définitions peuvent servir à davantage d'usages, du moment qu'il existe une relation directe entre les éléments. Partant de là, tous les exemples ci-dessous pourraient faire l'objet d'une liste de définitions :

DT: Orateur: DD: Citation

DT: Image: DD: Description; DD: Lieu de la prise de vue; DD: Photographe

DT: Mot: 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: Liens internes: DD: Page d'accueil; DD: Section 1; DD: Section 2
DT: Liens externes: DD: Lien externe 1; DD: Lien externe 2

Quels sont les désavantages des listes de définitions ?

Avant d'opter pour une liste de définitions, soyez bien conscient que ce n'est pas forcément toujours le meilleur choix dans tous les cas.

Le <dt> ne peut pas contenir d'éléments de type bloc, notamment les éléments de titre <hn>. Si le contenu d'un <dt> ne peut pas être décrit comme un titre, il ne peut pas se voir reconnaître l'importance hiérarchique qui devrait aller avec un titre. De même, Google et les autres moteurs de recherche n'indexeront pas les listes de définitions de la même manière que les contenus reconnus comme des titres.

Les listes de définitions ne peuvent pas avoir l'apparence de données tabulaires, mais elles peuvent contenir des éléments d'accessibilité comme des descripteurs (labels) et des en-têtes (headers) pour mieux relier les informations. Pour cette raison, elles ne devraient pas être utilisées en remplacement de données tabulaires complexes.

Styler des listes de définitions

Voilà quelques exemples de la façon dont on peut les styler :

Une liste de définitions sans style

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

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>

Une liste de définitions avec des styles de base

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

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>


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

Une liste de définitions avec des images de fond

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

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>


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

Une liste de définitions en encadrés

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

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>


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

Donner à une liste de définitions l'apparence d'une table

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

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>

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

/* hack de commentaire avec un antislash pour ie5 mac \*/
dt { clear: both; }
/* end hack */

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

Une liste flottante pour présenter une image et sa description

Fleur de Banksia: Banksius maximus; On la trouve au large des côtes australiennes

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

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>

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

Styler une liste de définitions pour en faire une galerie d'images


Ici le titre: Ici la description


Ici le titre: Ici la description


Ici le titre: Ici la description

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>

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

Présenter une liste comme un calendrier d'événements

23 mars: Club automobile; 9h00; Une quantité de voitures de collection seront rassemblées. Il y aura aussi des ballons, des clowns, des animations pour les enfants et des stands restauration. Toute la famille va s'amuser.
13 juin: Foire aux gâteaux; 12h00; Des gâteaux en tous genres. Les fonds récoltés iront à la sauvegarde du requin-baleine

HTML

<dl class="event">

<dt>23 mars</dt>
<dd>Club automobile</dd>
<dd>19h00</dd>
<dd>Une quantité de voitures de collection seront rassemblées.
Il y aura aussi des ballons, des clowns,
des animations pour les enfants et des stands restauration.
Toute la famille va s'amuser.</dd>
<dt>13 juin</dt>
<dd>Foire aux gâteaux</dd>
<dd>12h00</dd>
<dd>Des gâteaux en tous genres.
Les fonds récoltés iront à la sauvegarde
du requin-baleine</dd>
</dl>

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

Autres exemples et lectures complémentaires :

http://www.maxdesign.com.au/presentation/definition/

Fiche technique

Article original : Definition lists - misused or misunderstood?
Auteur : Russ Weakley
Date de parution : janvier 2004
Traduction : Stéphane Deschamps
Date de traduction : mars 2004
Niveau : Intermédiaire

À propos de l'auteur

Cela fait 18 ans que Russ Weakley travaille dans le domaine du design, dont 8 dans le web. Actuellement web designer pour l’Australian Museum Online, il est spécialisé en développement, interface utilisateur, navigation, structure de site et graphisme.