L'élément HTML <dl> représente une liste de descriptions sous la forme d'une liste de paires associant des termes (fournis par des éléments <dt>) et leurs descriptions ou définitions (fournies par des éléments <dd>). On utilisera par exemple cet élément pour implémenter un glossaire.
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
| Catégories de contenu | Contenu de flux et, si les éléments enfants de <dl> incluent une paire avec un nom et une valeur, du contenu tangible. |
|---|---|
| Contenu autorisé |
Zéro ou plusieurs groupes composés d'un ou plusieurs éléments Selon le WHATWG : un ou plusieurs éléments |
| Omission de balises | Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires |
| Parents autorisés | Tout élément acceptant du contenu de flux. |
| Rôles ARIA autorisés | group, presentation |
| Interface DOM | HTMLDListElement |
Attributs
Cet élément inclut les attributs universels.
Exemples
Un seul terme et une seule définition
HTML
<dl>
<dt>Firefox</dt>
<dd>
Un navigateur Web libre, open-source, multi-plateforme
dévelopé par la Mozilla Corporation et des centaines de
volontaires.
</dd>
<!-- D'autres termes et leurs descriptions -->
</dl>
Résultat
Plusieurs termes avec une même définition
HTML
<dl>
<dt>Firefox</dt>
<dt>Mozilla Firefox</dt>
<dt>Fx</dt>
<dd>
Un navigateur Web libre, open-source, multi-plateforme
dévelopé par la Mozilla Corporation et des centaines de
volontaires.
</dd>
<!-- D'autres termes et leurs définitions -->
</dl>
Résultat
Un seul terme avec plusieurs définitions
HTML
<dl>
<dt>Firefox</dt>
<dd>
Un navigateur Web libre, open-source, multi-plateforme
dévelopé par la Mozilla Corporation et des centaines de
volontaires.
</dd>
<dd>
Le petit panda, panda roux, panda fuligineux ou panda
éclatant (Ailurus fulgens), est un mammifère originaire
de l'Himalaya et de la Chine méridionale.
</dd>
<!-- D'autres termes et leurs définitions -->
</dl>
Résultat
Métadonnées
Les listes de définitions sont utiles lorsqu'on souhaite afficher des métadonnées sous forme d'une liste de clés-valeurs.
<dl>
<dt>Name</dt>
<dd>Godzilla</dd>
<dt>Born</dt>
<dd>1952</dd>
<dt>Birthplace</dt>
<dd>Japan</dd>
<dt>Color</dt>
<dd>Green</dd>
</dl>
Astuce : Il peut être pratique de définir un séparateur clé/valeur en CSS3, par exemple : dt:after {content: ": ";}.
Notes
Cet élément ne doit pas être utilisé (de même que les éléments <ul>), dans le seul but de créer une indentation sur la page. Bien que cela fonctionne parfaitement, c'est une pratique déconseillée qui mêle mise en forme et sémantique. Cela modifie le rôle que doivent avoir les listes de définitions.
Pour changer l'indentation de la définition d'un terme, il faut utiliser la propriété CSS margin.
Spécifications
| Spécification | État | Commentaires |
|---|---|---|
| HTML Living Standard La définition de '<dl>' dans cette spécification. |
Standard évolutif | |
| HTML5 La définition de '<dl>' dans cette spécification. |
Recommendation | |
| HTML 4.01 Specification La définition de '<dl>' dans cette spécification. |
Recommendation | Définition initiale. |
Compatibilité des navigateurs
| Ordinateur | Mobile | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Support simple | Chrome Support complet Oui | Edge Support complet Oui | Firefox Support complet 1 | IE Support complet Oui | Opera Support complet Oui | Safari Support complet Oui | WebView Android Support complet Oui | Chrome Android Support complet Oui | Edge Mobile Support complet Oui | Firefox Android Support complet 4 | Opera Android Support complet Oui | Safari iOS Support complet Oui | Samsung Internet Android Support complet Oui |
Légende
- Support complet
- Support complet