Les secrets du HTML <dl> que tu ignores
Pourquoi ça compte pour toi
Si tu construis des sites, tu as probablement ignoré ou mal utilisé <dl>. Pourtant, comprendre ses vraies capacités (grouper avec <div>, empiler plusieurs <dd>, l'accessibilité ARIA) change la façon dont tu structures les données — crédits, métadonnées, associations clé-valeur. C'est du HTML natif, zéro JavaScript, accessible d'emblée.
Ce qu'il faut retenir
- 1.Un <dt> peut être suivi de plusieurs <dd> (pas 1-à-1 obligatoire)
- 2.Tu peux envelopper <dt> et <dd> dans un <div> uniquement pour styliser sans casser la sémantique
- 3.ARIA labelledby relie la liste à un titre — améliore l'accessibilité pour les lecteurs d'écran
Tu galères avec le jargon ?
Lis la version réécrite en mode débutant — toutes les idées, sans le jargon.
Pourquoi <dl> c'est plus puissant qu'on le croit
L'élément <dl> (description list, pas definition list — le nom a changé en 2008) est souvent rangé au placard. Erreur. C'est ton allié pour structurer n'importe quelle association terme-valeur.
Un <dt> pour plusieurs <dd>
Prends des crédits ou une fiche produit. Un auteur peut avoir plusieurs rôles, un ingrédient plusieurs quantités selon les portions.
<dl>
<dt>Auteur</dt>
<dd>Jeffrey Zeldman</dd>
<dd>Ethan Marcotte</dd>
</dl>
Valide. Lisible. Accessible.
Grouper sans casser la sémantique
Pour styliser colonnes, bordures, espacement, tu peux envelopper chaque paire dans un <div> — mais UNIQUEMENT <div>. Pas de <section>, pas de <article>. C'est la seule exception.
<dl>
<div>
<dt>Rôle</dt>
<dd>Lead dev</dd>
</div>
<div>
<dt>Rôle</dt>
<dd>Designer</dd>
</div>
</dl>
Connecter à un titre avec ARIA
Utilise aria-labelledby pour relier ta liste à un titre. Les lecteurs d'écran comprennent le contexte.
<h2 id="credits">Crédits</h2>
<dl aria-labelledby="credits">
<!-- ta liste -->
</dl>
Le piège du lecteur d'écran
Attention : la prise en charge de <dl> par les lecteurs d'écran n'est pas uniforme. Teste sur NVDA, JAWS, VoiceOver avant de déployer. Adrian Roselli a une excellente documentation là-dessus.
Et concrètement pour toi ?
Choisis ton profil — la lecture de l'article change selon qui tu es.
Pour toi, <dl> illustre comment le web s'auto-structure : chaque élément HTML a une intention (listes de définitions, crédits, métadonnées). Comprendre ça t'aide à voir comment l'IA parse et comprend le web mieux que des boîtes génériques.
Essayer maintenant
Relire la spec HTML5 sur les description lists →Source
📊 Cours en bourse
Pour aller plus loin
Cet article t'a donné envie d'approfondir ? Deux formations Noésis t'attendent :