Balise dl HTML - Apprendre HTML

La balise HTML <dl> définit une liste de descriptions (anciennement appelée liste de définitions). Elle regroupe des termes et leurs descriptions sous forme de paires nom–valeur. L'élément <dl> est le conteneur ; à l'intérieur, chaque balise <dt> spécifie un terme (le nom), et chaque balise <dd> spécifie la description de ce terme (la valeur).

Cette page explique quand utiliser <dl> plutôt qu'une liste non ordonnée ou une liste ordonnée, comment regrouper des éléments pour le style et les microdonnées, comment le balisage se comporte vis-à-vis de l'accessibilité, et des exemples exécutables pour les cas d'usage courants.

Quand utiliser `<dl>`

Utilisez une liste de descriptions lorsque votre contenu est un ensemble de paires nom–valeur plutôt qu'une simple séquence d'éléments. Recourez à <dl> pour :

Les glossaires et dictionnaires — un terme suivi de sa définition.
Les FAQ — chaque question est un <dt>, chaque réponse est un <dd>.
Les métadonnées — des paires clé–valeur comme Author, Published, Status.
Les dialogues ou scripts — le personnage est le terme, la réplique est la description.
Les fiches produit — Weight, Dimensions, Material, chacun avec une valeur.

Préférez un <ul> lorsque les éléments n'ont pas d'ordre inhérent ni de valeur associée, et un <ol> lorsque l'ordre ou la numérotation est important. La caractéristique distinctive de <dl> est l'association d'un nom avec une ou plusieurs valeurs.

N'utilisez pas <dl> uniquement pour indenter du texte. Il porte une signification sémantique, et l'utiliser pour la mise en page visuelle masque cette signification. Pour indenter du contenu visuellement, utilisez plutôt la propriété CSS margin ou padding.

Syntaxe

La balise <dl> fonctionne en paires. Les termes et les descriptions sont écrits entre les balises ouvrante (<dl>) et fermante (</dl>).

Exemple de la balise HTML `<dl>` :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <dl>
      <dt>Hypertext</dt>
      <dd>A system of text pages that have cross-references.</dd>
      <dt>Hyperlink</dt>
      <dd>A part of a hypertext document that references another item.</dd>
    </dl>
  </body>
</html>

Essayez vous-même »

Plusieurs termes et descriptions

Un seul <dt> peut avoir plusieurs descriptions <dd>, et plusieurs termes <dt> peuvent partager une seule description <dd>. Cela permet de modéliser des synonymes, des alternatives et des définitions groupées.

<dl>
  <!-- One term, multiple descriptions -->
  <dt>Firefox</dt>
  <dd>A free, open source, cross-platform web browser.</dd>
  <dd>Developed and maintained by the Mozilla Foundation.</dd>

  <!-- Multiple terms sharing one description -->
  <dt>JS</dt>
  <dt>JavaScript</dt>
  <dt>ECMAScript</dt>
  <dd>The programming language of the web.</dd>
</dl>

Regrouper des paires avec `<div>`

HTML5 permet d'envelopper chaque groupe nom–valeur dans un <div> placé directement à l'intérieur du <dl>. C'est du balisage valide, utile lorsque vous souhaitez :

appliquer du CSS à une paire entière en une seule fois (par exemple avec Flexbox ou CSS Grid),
attacher des microdonnées ou des attributs globaux comme class ou data-* à un seul groupe.

Le <div> est le seul élément autre que <dt> et <dd> autorisé comme enfant direct de <dl>.

<dl>
  <div class="row">
    <dt>Name</dt>
    <dd>Ada Lovelace</dd>
  </div>
  <div class="row">
    <dt>Field</dt>
    <dd>Mathematics</dd>
  </div>
  <div class="row">
    <dt>Known for</dt>
    <dd>The first published algorithm for a computer.</dd>
  </div>
</dl>

.row {
  display: flex;
  gap: 1rem;
}
.row dt {
  width: 8rem;
  font-weight: bold;
}

Accessibilité

Une liste de descriptions est un moyen accessible d'exposer des relations clé–valeur, mais uniquement lorsque le balisage est utilisé de manière sémantique.

Les éléments <dt> ont un rôle implicite term et les éléments <dd> un rôle implicite definition, de sorte que les technologies d'assistance comprennent quel élément est le nom et lequel est la valeur.
Les lecteurs d'écran annoncent généralement un nombre, par exemple « liste de descriptions, 3 termes », puis lisent chaque terme suivi de sa description. L'association doit être évidente à partir du seul texte ; rédigez donc chaque <dd> de façon à ce que sa relation avec le <dt> précédent soit claire hors contexte.
Le regroupement optionnel avec <div> ne rompt pas ce comportement. Les rôles term et definition s'appliquent toujours car les éléments <dt> et <dd> restent des descendants valides du <dl>.

Attributs

La balise <dl> prend en charge les attributs globaux et les attributs d'événement.

Comment styliser la balise HTML `<dl>`

Par défaut, les navigateurs indentent chaque <dd> et empilent les termes et descriptions verticalement. Vous pouvez les réinitialiser et les restyliser avec CSS :

dl {
  margin: 0;
  padding: 0;
}
dt {
  font-weight: bold;
}
dd {
  margin-left: 20px;
}

Pratique

Quelles affirmations concernant la balise HTML dl sont correctes ?

La balise dl crée une liste de descriptions composée de paires terme-valeur.La balise dl est utilisée pour créer une liste déroulante en HTML.La balise dt spécifie un terme et la balise dd spécifie sa description à l'intérieur d'un dl.La balise dl ne peut pas être combinée avec d'autres balises.Un div peut regrouper une paire dt et dd comme enfant direct de dl en HTML5 valide.Un seul dt ne peut avoir qu'exactement un dd.

Quand utiliser <dl>