Balises HTML <DL>, <DT> et <DD> — Listes de définition en HTML5

Qu'est-ce qu'une liste de définition HTML ?

Les listes de définition HTML constituent l'un des éléments sémantiques les plus puissants et pourtant les moins exploités du langage HTML. Contrairement aux listes à puces (<ul>) ou numérotées (<ol>), les listes de définition permettent d'associer un terme à sa description de manière structurée et sémantique — idéal pour les glossaires, lexiques, FAQ et fiches techniques.

En HTML5, ces balises sont officiellement appelées description lists (listes de description), ce qui reflète mieux leur polyvalence : elles ne servent pas uniquement à définir des termes, mais aussi à associer n'importe quelle clé à sa valeur (métadonnées, propriétés, spécifications techniques).

Les trois balises essentielles : <DL>, <DT> et <DD>

La structure d'une liste de définition HTML repose sur trois balises complémentaires :

• <dl> (Description List) — conteneur principal de la liste de définition
• <dt> (Description Term) — le terme ou l'entrée à définir
• <dd> (Description Details) — la définition ou description associée au terme

La balise <dl> encadre l'ensemble de la liste. Elle contient obligatoirement des éléments <dt> (terme) et <dd> (description). Il est possible d'associer plusieurs <dd> à un seul <dt>, ou d'avoir plusieurs <dt> consécutifs pour un même groupe de définitions. La balise de fermeture est techniquement facultative pour <dt> et <dd>, mais il est fortement recommandé de toujours les fermer pour garantir la validité et la maintenabilité du code.

Pour en savoir plus sur les différents types de listes HTML (ul, ol, dl), consultez notre guide complet.

Exemple de base : glossaire HTML simple

Voici un exemple fondamental illustrant la structure d'une liste de définition HTML pour créer un mini-glossaire de termes web :

<!-- Structure de base d'une liste de définition HTML -->
<dl>
  <!-- dt = terme à définir (Description Term) -->
  <dt>HTML</dt>
  <!-- dd = définition du terme (Description Details) -->
  <dd>Langage de balisage utilisé pour structurer et afficher du contenu sur le web.</dd>
  <dt>Balise</dt>
  <dd>Élément syntaxique HTML délimité par des chevrons (< >) qui définit la structure du document.</dd>
  <dt>Attribut</dt>
  <dd>Propriété spécifique ajoutée à une balise HTML pour modifier son comportement ou son apparence, sous la forme nom="valeur".</dd>
</dl>

Ce code produit visuellement une liste où chaque terme est affiché en retrait normal, et chaque définition est indentée automatiquement par le navigateur.

Exemple avancé : plusieurs définitions et termes groupés

HTML5 autorise des structures plus complexes : un <dt> peut avoir plusieurs <dd>, et plusieurs <dt> consécutifs peuvent partager une même <dd>. Cela est particulièrement utile pour les glossaires multilingues ou les synonymes :

<!-- Exemple avancé : termes multiples et définitions multiples -->
<dl>
  <!-- Deux termes synonymes partageant la même définition -->
  <dt>CSS</dt>
  <dt>Feuille de style</dt>
  <dd>Langage de présentation qui contrôle l'apparence visuelle des éléments HTML : couleurs, typographie, mise en page et animations.</dd>
  <!-- Un terme avec plusieurs définitions ou aspects -->
  <dt>JavaScript</dt>
  <dd>Langage de programmation interprété, orienté objet, utilisé côté client pour rendre les pages web interactives et dynamiques.</dd>
  <dd>Depuis Node.js, JavaScript est également utilisé côté serveur pour le développement back-end.</dd>
</dl>

Exemple pratique : liste de définition stylisée avec CSS

En production, on personnalise souvent le rendu des balises dl dt dd avec CSS pour créer des fiches techniques, des FAQ ou des tableaux de propriétés accessibles :

<!-- HTML : liste de définition pour une fiche produit -->
<dl class="fiche-produit">
  <dt>Résolution</dt>
  <dd>1920 × 1080 pixels (Full HD)</dd>
  <dt>Processeur</dt>
  <dd>Intel Core i7 12e génération, 3,6 GHz</dd>
  <dt>Mémoire RAM</dt>
  <dd>16 Go DDR5 — extensible jusqu'à 64 Go</dd>
</dl>
/* CSS associé pour un rendu en deux colonnes */
<style>
  .fiche-produit { display: grid; grid-template-columns: 1fr 2fr; gap: 0.5rem; }
  .fiche-produit dt { font-weight: bold; color: #333; }
  .fiche-produit dd { margin: 0; color: #666; }
</style>

Attributs des balises <DL>, <DT> et <DD>

Les balises de liste de définition acceptent les attributs HTML globaux standardisés. Ces attributs sont communs à la plupart des éléments HTML et sont essentiels pour l'accessibilité, le style et l'interactivité. Le tableau ci-dessous présente les attributs compatibles selon la DTD HTML 4.01 / XHTML 1.0 (S=Strict, T=Transitional, F=Frameset) — en HTML5, ces restrictions de DTD n'existent plus mais les attributs restent pleinement valides et recommandés.

Attributs globaux (HTML standards)

Attributs d'événements JavaScript

Les balises de liste de définition supportent également tous les gestionnaires d'événements HTML standards, permettant d'ajouter de l'interactivité via JavaScript :

Bonnes pratiques et accessibilité des listes de définition

Pour un contenu conforme aux standards HTML5 et aux critères d'accessibilité WCAG 2.1, voici les recommandations essentielles concernant l'utilisation des balises dl, dt et dd :

• Utilisez <dl> uniquement pour des associations terme/description sémantiquement justifiées, pas comme substitut à un tableau de données.
• Ajoutez l'attribut lang sur les <dt> ou <dd> contenant du texte dans une langue différente du document principal.
• En HTML5, il est possible d'envelopper des paires dt/dd dans un élément <div> à l'intérieur de <dl> pour faciliter le style CSS sans rompre la sémantique.
• Pour les lecteurs d'écran, ajoutez un aria-label sur le <dl> pour décrire le contexte de la liste (ex: aria-label="Glossaire des termes HTML").
• Les moteurs de recherche Google valorisent les listes de définition bien structurées pour les featured snippets et les résultats enrichis.

   Vous êtes ici : Éléments de liste de définition HTML    Retour à la liste des balises HTML

Par carabde | Mis à jour le 2 mars 2026