La balise HTML <dd>
La balise HTML <dd> fournit la description d'un terme dans une liste de définitions, utilisée avec les balises <dl> et <dt>.
La balise HTML <dd> (description details) fournit la description d'un terme dans une liste de définitions. Elle ne fonctionne qu'à l'intérieur d'un <dl> (liste de définitions), associée à un ou plusieurs éléments <dt> (terme de définition) qui nomment ce qui est décrit.
Le regroupement au sein d'un <dl> est flexible — il est possible d'avoir :
- un terme suivi d'une description,
- un terme suivi de plusieurs descriptions,
- plusieurs termes (synonymes) suivis d'une description,
- plusieurs termes suivis de plusieurs descriptions.
L'élément <dd> peut contenir d'autres contenus : paragraphes, listes, images, liens, etc. Il est placé dans <body>, en tant qu'enfant de <dl>. Par défaut, les navigateurs indentent <dd> avec une marge gauche afin que la description apparaisse visuellement sous son terme.
Quand utiliser une liste de définitions
Utilisez <dl>/<dt>/<dd> pour les paires nom-valeur — un contenu où chaque élément est une étiquette associée à une description. Les cas d'usage appropriés sont :
- Glossaires — un mot et sa signification.
- FAQ — une question (
<dt>) et sa réponse (<dd>). - Fiches techniques de produits / métadonnées — des propriétés telles que « Poids », « Matière », « Référence » et leurs valeurs.
N'utilisez pas une liste de définitions simplement pour obtenir une indentation ou pour une suite arbitraire d'éléments sans étiquette. Pour des étapes ordonnées, utilisez une liste ordonnée (<ol>) ; pour un ensemble simple d'éléments, utilisez une liste non ordonnée (<ul>). Choisissez une liste de définitions uniquement lorsque chaque entrée est véritablement un terme associé à une description.
Syntaxe
La balise <dd> fonctionne par paires. Le contenu est écrit entre les balises ouvrante (<dd>) et fermante (</dd>), et doit se trouver à l'intérieur d'un <dl> à la suite d'un ou plusieurs éléments <dt>.
Exemple : un glossaire
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Coffee glossary</h1>
<dl>
<dt>Espresso</dt>
<dd>A concentrated coffee brewed by forcing hot water through finely-ground beans.</dd>
<dt>Latte</dt>
<dd>Espresso with a large amount of steamed milk and a light layer of foam.</dd>
<dt>Americano</dt>
<dd>Espresso diluted with hot water for a lighter, longer drink.</dd>
</dl>
</body>
</html>Exemple : une fiche technique de produit
Un seul terme peut également avoir plusieurs descriptions <dd>, et plusieurs termes <dt> peuvent partager une même <dd> :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Backpack specifications</h2>
<dl>
<dt>Capacity</dt>
<dd>28 liters</dd>
<dt>Material</dt>
<dd>Recycled polyester</dd>
<dd>Water-resistant coating</dd>
<dt>Color</dt>
<dt>Colour</dt>
<dd>Charcoal grey</dd>
</dl>
</body>
</html>Accessibilité
L'élément <dd> possède un rôle ARIA implicite de definition, et <dt> a le rôle term. Les technologies d'assistance utilisent la structure <dl> pour annoncer chaque description avec le terme auquel elle correspond ; ainsi, conserver un balisage sémantique (plutôt que de simuler une liste avec des <div> et du CSS) facilite la navigation dans le contenu. N'ajoutez pas d'attribut role explicite — le rôle implicite est déjà correct.
Attributs
La balise <dd> n'a aucun attribut spécifique. Elle ne prend en charge que les Attributs globaux et les Attributs d'événement.
Comment styliser une balise HTML <dd>
Les navigateurs appliquent par défaut une marge gauche (généralement 40px) à <dd>. Vous pouvez la supprimer ou la remplacer par du CSS — par exemple, supprimer l'indentation et ajouter votre propre espacement et style :
dd {
margin-left: 0; /* remove the default left indent */
padding-left: 1rem; /* add your own spacing instead */
color: #555;
}
dt {
font-weight: bold;
}