Comment structurer efficacement vos contenus avec <dl>, <dt> et <dd> ?
Publié le
Les balises <dl>, <dt>, et <dd> sont des éléments HTML qui permettent de structurer des listes de définitions. Utilisées pour créer des glossaires, des listes de termes et définitions ou des informations structurées, elles facilitent la lecture et l'organisation du contenu, notamment pour les utilisateurs de technologies d'assistance.
dl : Liste de définitions
La balise <dl> (pour "Description List") est un conteneur qui regroupe une liste de définitions. Elle contient des éléments <dt> pour représenter les termes à définir et <dd> pour leurs définitions. Un terme <dt> peut être suivi de plusieurs éléments <dd>, permettant de fournir plusieurs définitions ou explications pour un même terme.
Exemple :
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
<dd>Utilisé pour la présentation visuelle des pages web</dd>
</dl>
Dans cet exemple, <dl> regroupe des définitions de termes, avec plusieurs descriptions possibles pour un même terme, créant une structure claire et accessible.
dt : Terme de définition
La balise <dt> (pour "Definition Term") est utilisée pour représenter le terme ou le nom de la définition. Elle fonctionne comme le titre de chaque élément dans une liste de définitions, et peut être associée à un ou plusieurs éléments <dd> qui en fournissent les explications.
Exemple :
<dl>
<dt>JavaScript</dt>
<dd>Langage de programmation pour le web.</dd>
<dd>Permet de créer des interactions dynamiques sur les sites.</dd>
</dl>Le terme "JavaScript" est présenté avec la balise <dt>, permettant d'y associer plusieurs descriptions avec les balises <dd>.
dd : Définition du terme
La balise <dd> (pour "Description Definition") est utilisée pour la définition ou la description du terme précédemment introduit par <dt>. Elle peut être répétée pour ajouter plusieurs définitions à un seul terme.
Exemple :
<dl>
<dt>API</dt>
<dd>Interface de programmation d'application qui permet la communication entre logiciels.</dd>
<dd>Facilite l'intégration entre différents services et applications.</dd>
</dl>Ici, <dd> fournit plusieurs explications du terme "API", grâce à l'utilisation de plusieurs éléments <dd>.
Accessibilité et bonnes pratiques
Les balises <dl>, <dt>, et <dd> sont intrinsèquement accessibles aux lecteurs d'écran, car elles permettent de structurer des définitions de manière cohérente. Toutefois, pour renforcer l'accessibilité, il est recommandé de suivre ces pratiques :
- Utilisez
<dl>pour des listes de définitions ou glossaires uniquement ; pour des listes classiques, préférez<ul>ou<ol>. - Assurez-vous que chaque
<dt>a au moins un<dd>correspondant pour éviter toute confusion. - Si la liste contient des groupes logiques de termes, envisagez de les séparer pour faciliter la compréhension.
Conclusion
Les balises <dl>, <dt>, et <dd> offrent un excellent moyen de structurer les informations lorsque vous avez besoin de lier des termes à leurs définitions. Utilisées de manière appropriée, elles améliorent l'organisation du contenu et l'expérience utilisateur, particulièrement pour les technologies d’assistance.
