Balise HTML <dt>
La balise <dt> désigne un terme dans une liste de descriptions. Description, attributs et exemples.
La balise <dt> (abréviation de description term, anciennement definition term) désigne le terme défini à l'intérieur d'une liste de descriptions. C'est l'une des trois balises qui composent ce type de liste, avec <dl> et <dd> :
<dl>encadre toute la liste (la liste de descriptions).<dt>nomme un terme, par exemple un mot dans un glossaire ou une étiquette de métadonnée.<dd>fournit la description ou la valeur du terme qui précède.
Utilisez une liste de descriptions lorsque votre contenu forme naturellement un ensemble de paires nom/valeur : un glossaire, des questions-réponses (FAQ), des métadonnées clé/valeur ou des définitions de termes. Pour du contenu ordonné ou à puces, préférez un autre type de liste — consultez la vue d'ensemble des listes HTML.
Règles de structure
L'élément <dt> impose deux conditions pour un balisage valide et accessible :
<dt>doit être un enfant direct de<dl>. Il ne peut pas apparaître seul en dehors d'une liste de descriptions (ni, en HTML moderne, à l'intérieur d'un<div>englobant directement dans le<dl>).<dt>doit précéder son<dd>. Chaque groupe commence par un ou plusieurs termes (<dt>), suivis d'une ou plusieurs descriptions (<dd>). Un<dd>décrit le ou les éléments<dt>qui le précèdent.
La balise <dt> fonctionne en paires : le contenu se place entre les balises ouvrante <dt> et fermante </dt>.
Exemple de la balise HTML <dt> :
Balise HTML <dt>
<!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>Résultat
Plusieurs termes et plusieurs descriptions
Un groupe de descriptions n'est pas limité à un seul terme et une seule description. Vous pouvez associer plusieurs éléments <dt> et <dd> dans le même groupe.
Plusieurs <dt> pour un <dd> — utilisez cette approche lorsque plusieurs termes partagent une même définition, par exemple des synonymes ou des orthographes alternatives :
<dl>
<dt>Firefox</dt>
<dt>Mozilla Firefox</dt>
<dt>Fx</dt>
<dd>A free, open-source web browser developed by the Mozilla Foundation.</dd>
</dl>Plusieurs <dd> pour un <dt> — utilisez cette approche lorsqu'un seul terme possède plusieurs significations ou valeurs :
<dl>
<dt>Coffee</dt>
<dd>A hot beverage brewed from roasted coffee beans.</dd>
<dd>The seeds of the coffee plant.</dd>
</dl>Un exemple concret : métadonnées d'un produit
Les listes de descriptions sont idéales pour les métadonnées clé/valeur. Ici, chaque <dt> est une étiquette et chaque <dd> est sa valeur :
<dl>
<dt>Product name</dt>
<dd>Mechanical Keyboard K3</dd>
<dt>Manufacturer</dt>
<dd>Keychron</dd>
<dt>Connectivity</dt>
<dd>Bluetooth 5.1</dd>
<dd>USB-C (wired)</dd>
<dt>Price</dt>
<dd>$79.99</dd>
</dl>Remarquez que le terme Connectivity possède deux valeurs <dd> — une façon élégante de lister plusieurs valeurs pour une même étiquette.
Rendu par défaut
Les navigateurs n'appliquent pas de style particulier à <dt> par défaut : le terme s'affiche avec une graisse normale (non gras), tandis que chaque <dd> suivant est mis en retrait. La hiérarchie visuelle attendue pour un glossaire — termes en gras — provient du CSS et non des paramètres par défaut du navigateur.
Attributs
La balise <dt> prend en charge les attributs globaux et les attributs d'événement.
Comment styliser une balise HTML <dt>
L'extrait de code ci-dessous remplace le rendu par défaut : il met les termes en gras et leur attribue une couleur distincte afin qu'ils se démarquent de leurs descriptions.
dt {
font-weight: bold;
color: #2c3e50;
}Accessibilité
Les listes de descriptions véhiculent une signification au-delà de leur apparence. Les lecteurs d'écran reconnaissent la structure <dl>/<dt>/<dd> et annoncent chaque <dt> comme un terme associé à sa description <dd>, de sorte que les utilisateurs entendent le terme et sa valeur comme une paire cohérente. Reproduire le même aspect visuel avec de simples paragraphes et du CSS fait perdre cette relation. Utilisez une véritable liste de descriptions chaque fois que le contenu constitue réellement un ensemble de paires terme/description.