mozilla

<dl>

Résumé

L'élément HTML <dl> (pour Definition List ou liste de définitions) forme une liste de paires associant des termes et leurs définitions. Typiquement, on utilisera cet élément pour implémenter un glossaire.

  • 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 palpable
  • Contenu autorisé Zéro ou plusieurs éléments <dt>, chacun suivi par un ou plusieurs éléments <dd>.
  • Omission de balises Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires
  • É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
Cet attribut force la description de la définition à apparaître sur la même ligne que le terme défini. Cet attribut n'est pas standard et n'est actuellement pas supporté.

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.

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 Statut Commentaires
WHATWG 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  

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)

Voir aussi

Étiquettes et contributeurs liés au document

Contributeurs à cette page : tregagnon, SphinxKnight, msherefel
Dernière mise à jour par : SphinxKnight,