Résumé
L'élément HTML <dl> (pour Definition List) regroupe une liste de paires associant des termes et leurs descriptions. Implémenter un glossaire représente une utilisation classique de cet élément.
- Catégories de contenu Contenu de flux, et si les éléments enfants de
<dl>inclus une paire avec un nom et une valeur, contenu palpable - Contenu autorisé Zero ou plusieurs éléments
<dt>, chacun suivi par un ou plusieurs éléments<dd>. - Omission de balises Aucune, tant le tag d'ouverture que de fermeture est obligatoire
- Éléments parents autorisés Tout élément acceptant du contenu de flux.
- Interface DOM
HTMLDListElement
Attributs
Cet élément inclut les attributs globaux.
-
compact - Oblige la description de la définition à apparaître sur la même ligne que le terme défini. Fonctionne seulement avec Internet Explorer.
Exemples
Exemple avec un seul terme et une seule définition
<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 définitions --> </dl>
Cet example produira :
- Firefox
- Un navigateur Web libre, open-source, multi-plateforme dévelopé par la Mozilla Corporation et des centaines de volontaires.
Plusieurs termes avec une même définition
<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>
Produira le résultat suivant :
- Firefox
- Mozilla Firefox
- Fx
- Un navigateur Web libre, open-source, multi-plateforme dévelopé par la Mozilla Corporation et des centaines de volontaires.
Un seul terme, plusieurs définitions
<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>
Produira le résultat suivant :
- Firefox
- Un navigateur Web libre, open-source, multi-plateforme dévelopé par la Mozilla Corporation et des centaines de volontaires.
- 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.
Plusieurs termes avec plusieurs définitions
Il est également possible de définir plusieurs termes grâce à plusieurs définitions en combinant les différents exemples montrés ci-dessus.
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 et qui obscurcit le sens qu'ont 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 | Statut | Commentaires |
|---|---|---|
| WHATWG HTML Living Standard | Living Standard | |
| HTML5 | Candidate Recommendation | |
| HTML 4.01 Specification | Recommendation |
Compatibilité des navigateurs
| Fonctionnalité | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Support simple | 1.0 | (Oui) | (Oui) | (Oui) | (Oui) |
| Fonctionnalité | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Support simple | (Oui) | (Oui) | (Oui) | (Oui) | (Oui) |