<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 tangible
• 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>

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

Compatibilité des navigateurs

Voir aussi

• <dt>
• <dd>