Listes de définition en HTML

Lucas D. - July 19, 2024

Créer une liste de définitions

Pour créer une liste de définitions en HTML, utilisez la balise <dl> pour définir la liste. À l'intérieur de la balise <dl>, utilisez la balise <dt> pour spécifier un terme et la balise <dd> pour fournir la définition ou la description de ce terme.

Conseil: Structure de base d'une liste de définitions

<dl>
  <dt>Terme 1</dt>
  <dd>Définition ou description du Terme 1</dd>
  <dt>Terme 2</dt>
  <dd>Définition ou description du Terme 2</dd>
  ...
</dl>

La balise <dt> représente le terme à définir, tandis que la balise <dd> représente la définition ou la description de ce terme. Vous pouvez avoir plusieurs paires de <dt> et <dd> au sein d'une seule liste <dl>.

Les balises <dt> et <dd> doivent être des enfants directs de la balise <dl>. Vous ne pouvez pas les imbriquer dans d'autres éléments à l'intérieur de la liste de définitions.

Le contenu à l'intérieur des balises <dt> et <dd> peut être n'importe quel HTML valide, comme du texte, des images ou d'autres éléments en ligne. Cependant, gardez le contenu concis et pertinent par rapport au terme défini.

En utilisant les balises <dl>, <dt> et <dd>, vous pouvez créer des listes de définitions structurées et significatives dans vos documents HTML. Cela aide à organiser et à présenter l'information de manière claire et compréhensible pour les utilisateurs et les moteurs de recherche.

Exemple d'une Liste de Définitions

Conseil: Exemple de Liste de Définitions

<dl>
  <dt>HTML</dt>
  <dd>Hypertext Markup Language, le langage de balisage standard pour créer des pages web.</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets, un langage de feuilles de style utilisé pour décrire la présentation d'un document écrit en HTML.</dd>

  <dt>JavaScript</dt>
  <dd>Un langage de programmation de haut niveau et dynamique couramment utilisé pour créer des pages web interactives.</dd>

  <dt>Développement Front-end</dt>
  <dd>La pratique de développer l'interface utilisateur et les fonctionnalités côté client d'un site web ou d'une application.</dd>
  <dd>Cela implique l'utilisation de HTML, CSS et JavaScript pour créer les éléments visuels et interactifs d'une page web.</dd>
</dl>

Nous avons une liste de définitions (<dl>) qui contient des termes (<dt>) et leurs définitions (<dd>).

Le premier terme est "HTML", et sa définition est fournie dans la balise <dd> suivante. Les termes "CSS", "JavaScript" et "Développement Front-end" sont définis dans leurs balises <dd> respectives.

Pour le terme "Développement Front-end", il y a deux balises <dd>. Cela montre que vous pouvez avoir plusieurs définitions ou descriptions pour un seul terme. Chaque balise <dd> représente une définition distincte ou plus d'informations liées au terme.

En structurant la liste de définitions de cette manière, vous pouvez présenter une liste claire et organisée de termes et de leurs définitions. L'indentation et les sauts de ligne entre les balises sont optionnels mais peuvent améliorer la lisibilité du code.

Le contenu à l'intérieur des balises <dt> et <dd> peut être n'importe quel HTML valide, vous pouvez donc inclure des liens, des images ou d'autres éléments en ligne selon les besoins pour fournir plus de contexte ou d'explications pour chaque terme.

Styliser les listes de définitions avec CSS

Pour modifier l'apparence des listes de définitions, vous pouvez utiliser des styles CSS sur les éléments <dl>, <dt>, et <dd>. Cela vous permet de contrôler la mise en page, l'espacement, la typographie et d'autres aspects visuels de la liste.

Conseil: Exemple de CSS pour les listes de définitions

dl {
  margin-bottom: 20px;
}

dt {
  font-weight: bold;
  margin-top: 10px;
}

dd {
  margin-left: 20px;
  margin-bottom: 10px;
}

Élément	Propriété	Description
`dl`	`margin-bottom`	Ajoute de l'espace sous la liste, la séparant du reste du contenu.
`dt`	`font-weight`	Met les termes en gras, les aidant à se démarquer.
`dt`	`margin-top`	Ajoute de l'espace au-dessus de chaque terme, créant une séparation visuelle entre les termes.
`dd`	`margin-left`	Met en retrait les définitions, créant une hiérarchie visuelle.
`dd`	`margin-bottom`	Ajoute de l'espace sous chaque définition, les séparant les unes des autres.

Vous pouvez également utiliser d'autres propriétés CSS pour modifier davantage l'apparence des listes de définitions :

Propriété	Description
`font-family` et `font-size`	Contrôle la typographie des termes et des définitions.
`color` et `background-color`	Modifie les couleurs du texte et de l'arrière-plan.
`padding`	Ajoute un espacement interne dans les éléments `<dt>` et `<dd>`.
`border`	Ajoute des bordures autour des termes ou des définitions.
`list-style-type`	Modifie le style des puces pour les définitions (bien que les listes de définitions n'aient pas de puces par défaut).

En combinant ces propriétés CSS, vous pouvez créer des listes de définitions visuellement attrayantes et bien structurées qui s'harmonisent avec le design global de votre page web.

N'oubliez pas d'utiliser des noms de classe ou des ID pour cibler des listes de définitions spécifiques si vous avez plusieurs listes sur une page et que vous souhaitez appliquer différents styles à chacune d'elles.

Considérations d'accessibilité

Lors de l'utilisation de listes de définitions en HTML, il est important de prendre en compte l'accessibilité afin que votre contenu soit utilisable et compréhensible pour tous les utilisateurs, y compris ceux ayant des handicaps.

Une utilisation appropriée des listes de définitions améliore l'accessibilité en fournissant une structure claire et un sens sémantique au contenu. Les lecteurs d'écran et autres technologies d'assistance peuvent reconnaître et transmettre la relation entre les termes et leurs définitions, facilitant ainsi la navigation et la compréhension des informations pour les utilisateurs.

Pour améliorer l'accessibilité lors de l'utilisation des listes de définitions :

Conseil	Description
Utilisez des termes clairs et descriptifs	Choisissez des termes qui représentent précisément le concept défini. Évitez d'utiliser des abréviations ou du jargon sans fournir d'explication.
Fournissez des définitions concises et significatives	Rédigez des définitions qui expliquent clairement le terme de manière facile à comprendre. Évitez d'utiliser un langage complexe ou des explications longues et alambiquées.
Imbrication correcte	Assurez-vous que les éléments `<dt>` et `<dd>` sont correctement imbriqués dans l'élément `<dl>`. Une imbrication incorrecte peut perturber les lecteurs d'écran et la structure de la liste.
Utilisez des niveaux de titres appropriés	Si votre liste de définitions fait partie d'une section ou d'un document plus large, utilisez des niveaux de titres appropriés (`<h1>` à `<h6>`) pour fournir une structure hiérarchique et aider les utilisateurs à naviguer dans le contenu.
Fournissez un texte alternatif pour les images	Si vous incluez des images dans votre liste de définitions, assurez-vous de fournir un texte alternatif en utilisant l'attribut `alt`. Cela permet aux utilisateurs malvoyants de comprendre le contenu de l'image.
Testez avec des technologies d'assistance	Pour vérifier que votre liste de définitions est accessible, testez-la avec diverses technologies d'assistance, comme les lecteurs d'écran, pour vous assurer que le contenu est correctement transmis et navigable.

En suivant ces considérations d'accessibilité, vous pouvez créer des listes de définitions inclusives et utilisables pour un large éventail d'utilisateurs, quelles que soient leurs capacités ou les appareils qu'ils utilisent pour accéder à votre contenu.

N'oubliez pas que l'accessibilité n'est pas seulement une exigence, mais aussi une bonne pratique qui profite à tous les utilisateurs. En rendant vos listes de définitions accessibles, vous améliorez l'expérience utilisateur globale et vous assurez que votre contenu atteint un public plus large.