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 :
<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.
<dl>
<dt>Punt</dt>
<dd>Shooter un ballon</dd>
<dd>Prendre un paris</dd>
</dl><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.
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▲
V-B. Liste de définitions avec un style basique▲
<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>V-C. Liste de définitions avec image de fond▲
<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>.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▲
<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>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▲
<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>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▲
<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>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▲
<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>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▲
<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>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▲
<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>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; }