Listes de descriptions dl, dt et dd
Balisez les paires terme-définition avec des listes de descriptions.
Listes de descriptions dl, dt et dd est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage HTML Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML Academy comprend 4 leçons au total.
Qu’est-ce qu’une liste de descriptions ?
Une liste de descriptions regroupe des termes avec leurs descriptions :
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language — the structure of the web.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets — the presentation of the web.</dd>
<dt>JavaScript</dt>
<dd>The programming language of the web.</dd>
</dl>Les éléments dl, dt et dd
Trois éléments composent une liste de descriptions :
<dl>— conteneur de liste de descriptions<dt>— terme à décrire (la clé)<dd>— détails de la description (la valeur)
Plusieurs dd par dt
Un terme peut avoir plusieurs descriptions :
<dl>
<dt>HTML</dt>
<dd>Stands for HyperText Markup Language.</dd>
<dd>First published as HTML 2.0 in 1995.</dd>
<dd>Current version: HTML5 (Living Standard).</dd>
</dl>Plusieurs dt par dd
Plusieurs termes peuvent partager une description (synonymes, alias) :
<dl>
<dt>Username</dt>
<dt>Login</dt>
<dt>Handle</dt>
<dd>The unique identifier used to log in to your account.</dd>
</dl>Cas d’utilisation courants
Les listes de descriptions sont parfaites pour :
- Glossaires et définitions
- Sections FAQ (question → réponse)
- Métadonnées de produit (Auteur : Jane, Publication : 2024)
- Détails de recette (Temps de préparation : 10 min, Portions : 4)
- Documentation des paramètres d’interface de programmation
FAQ avec dl
Créez une FAQ avec des listes de descriptions :
<dl class="faq">
<dt>Is HTML a programming language?</dt>
<dd>No. HTML is a markup language. It defines structure and meaning, not logic or computation.</dd>
<dt>Do I need to close void elements?</dt>
<dd>In HTML5, void elements like <img> and <br> do not need a closing slash.</dd>
</dl>dl pour les métadonnées
Affichez les métadonnées d’un article ou d’un produit :
<article>
<h1>Responsive Images Guide</h1>
<dl class="metadata">
<dt>Author</dt>
<dd>Jane Smith</dd>
<dt>Published</dt>
<dd><time datetime="2024-03-15">March 15, 2024</time></dd>
<dt>Reading time</dt>
<dd>8 minutes</dd>
</dl>
</article>Mise en forme de dl
Mettez les listes de descriptions en forme avec CSS :
/* Two-column layout */
dl {
display: grid;
grid-template-columns: max-content 1fr;
gap: 0.25rem 1rem;
}
dt {
font-weight: bold;
color: #555;
}
dd {
margin: 0; /* Remove browser default dd margin */
}Imbrication de dl
Les listes de descriptions peuvent être imbriquées pour définir des hiérarchies :
<dl>
<dt>HTML Elements</dt>
<dd>
<dl>
<dt>Block elements</dt>
<dd>Take full width: div, p, h1-h6</dd>
<dt>Inline elements</dt>
<dd>Flow with text: span, a, strong</dd>
</dl>
</dd>
</dl>dl ou table pour les données clé-valeur
Quand utiliser <dl> ou <table> pour des données clé-valeur :
- dl — associations entre des termes et des descriptions (paires nom-valeur)
- table — données tabulaires avec des lignes et des colonnes (plusieurs attributs par élément)
<dl>
<dt>Name</dt><dd>Jane</dd>
<dt>Role</dt><dd>Developer</dd>
</dl>
<!-- vs table for multiple users with same attributes -->Éléments div inside dl
Regrouper les groupes dt/dd dans <div> inside <dl> est valide en HTML5 :
<dl>
<div>
<dt>HTML</dt>
<dd>Markup language for web pages.</dd>
</div>
<div>
<dt>CSS</dt>
<dd>Styling language for web pages.</dd>
</div>
</dl>
<!-- Useful for zebra-striping or grouping with CSS -->Vérification rapide
Quel élément contient la définition ou la valeur dans une liste de descriptions ?
Récapitulatif : listes de descriptions
Éléments essentiels des listes de descriptions :
<dl>— conteneur de liste de descriptions<dt>— terme (clé, question, nom)<dd>— description (valeur, réponse, définition)- Un dt peut avoir plusieurs dd ; plusieurs dt peuvent partager un dd
- Parfaites pour les glossaires, les FAQ et les métadonnées
- Regroupez les ensembles dans
<div>pour faciliter la mise en forme
Questions Fréquemment Posées
La leçon « Listes de descriptions dl, dt et dd » est-elle gratuite ?
Oui — le texte complet de « Listes de descriptions dl, dt et dd » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours HTML Academy, passe à CoddyKit PRO. Le cours HTML Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Listes de descriptions dl, dt et dd » ?
Balisez les paires terme-définition avec des listes de descriptions. Tu pratiques HTML Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer HTML Academy ?
Aucune expérience préalable n'est requise. HTML Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.
Combien de temps prend la leçon « Listes de descriptions dl, dt et dd » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon HTML Academy ?
Oui. Chaque leçon HTML Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Listes non ordonnées ul et li
- Listes ordonnées ol, start, reversed et type
- Listes de descriptions dl, dt et dd
- Listes imbriquées et style des listes