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.
