### dl : liste de définitions

Les listes de définitions permettent d'associer deux contenus entre eux. Si le 1er exemple qui vient à l'esprit est un glossaire (des termes sont associés à leur définition), on peut aussi employer ce type de liste pour des FAQ (Foires Aux Questions) ou des traductions.

Une liste de définitions se fait avec 2 élements HTML :

- l'élément dl marque les limites de la liste,
- l'élément dt définit un terme de la liste.
- l'élément dd définit le contenu associé au terme.

liste de définitions
Exemple : listes de définitions
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Listes de définitions</title> </head> <body> <h3>Des personnages fantastiques ...</h3> <dl> <dt>Yoda</dt> <dd>Yoda fut l'un des Maîtres Jedi les plus renommés de l'histoire galactique, il était connu pour sa sagesse légendaire, sa maîtrise de la Force et ses compétences en combat au sabre laser.</dd> <dt>Gandalf</dt> <dd>Gandalf est un mystérieux vieillard, membre de l'Ordre des Mages, qui met en branle les événements et joue un rôle de sage conseiller utilisant les forces de la magie blanche qu'il contrôle.</dd> </dl> <h3>... pour des histoires identiques.</h3> <dl> <dt><b>Qui a une épée bleue qui brille ?</b></dt> <dd>Luke Skywalker a un sabre-laser bleu et Frodon a lui aussi une épée bleu qui brille quand le danger est proche.</dd> <dt><b>Qui a une main coupée ?</b></dt> <dd>Le grand méchant Dark Vador se fait couper la main avant de devenir encore plus méchant. Le grand méchant Sauron se fait couper la main qui porte l'anneau.</dd> <dt><b>Des répliques identiques mot pour mot.</b></dt> <dd>Quand Dark Vador meurt, Luke lui dit "Je vais te sauver !". Darkounet lui répond : "Tu l'as déjà fait". Quand Theoden meurt, Eowyn lui dit "Je vais te sauver !". Theoden répond : "Tu l'as déjà fait". </dl> </body> </html>

Si on peut faire une analogie avec le concept des tables de hashage (des association de couples nom/valeur), les listes de définitions permettent aussi de faire des associations multiples (un nom avec plusieurs valeurs ou plusieurs noms avec la même valeur).

Exemple : listes de définitions
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Listes de définitions</title> </head> <body> <h3>Un nom et plusieurs valeurs</h3> <dl> <dt>rouge</dt> <dd lang="en">red</dd> <dd lang="de">rot</dd> <dd lang="it">rosso</dd> <dt>jaune</dt> <dd lang="en">yellow</dd> <dd lang="de">gelb</dd> <dd lang="it">giallo</dd> </dl> <h3>Plusieurs noms et une même valeur</h3> <dl> <dt>Navigateur</dt> <dt>Explorateur</dt> <dt>Butineur</dt> <dt>Fureteur</dt> <dd>Logiciel permettant l'affichage des pages web à l'écran et proposant des fonctionnalités étendues pour l'exploration sur le Net.</dd> <dt>Apprendre</dt> <dt>Etudier</dt> <dt>S'instruire</dt> <dt>Travailler</dt> <dd>Acquérir par l'étude, par la pratique, par l'expérience une connaissance, un savoir- faire, quelque chose d'utile</dd> </dl> </body> </html>

### Définitions des élements de liste

Réalisez la liste de définitions permettant d'obtenir la page ci-dessous.

définitions des élements de liste

Code à compléter

Exercice : définitions des élements de liste
<!DOCTYPE html> <html lang="fr"> </html>

Une solution possible

Exercice : définitions des élements de liste
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Eléments HTML de liste</title> </head> <body> <p>Eléments HTML de liste</p> <dl> <dt>ol</dt> <dd>Définit une liste ordonnée</dd> <dt>ul</dt> <dd>Définit une liste non ordonnée</dd> <dt>li</dt> <dd>Définit une ligne dans une liste ordonnée ou non ordonnée</dd> <dt>dl</dt> <dd>Définit une liste de définitions</dd> <dt>dt</dt> <dd>Définit un terme dans une liste de définitions</dd> <dt>dd</dt> <dd>Définit une définition pour un terme dans une liste de définition</dd> </dl> </body> </html>