Maîtriser les listes de descriptions HTML

Introduction

En HTML, il existe une balise spéciale appelée <dl> qui est utilisée pour définir une liste de descriptions. Ce type de liste est généralement créé pour expliquer des termes et leurs définitions, ou pour donner une brève explication d'un produit ou d'un service. Dans ce laboratoire, vous allez apprendre à utiliser la balise <dl> pour créer votre propre liste de descriptions en HTML.

Note: Vous pouvez pratiquer la programmation dans index.html et apprendre Comment écrire du HTML dans Visual Studio Code. Cliquez sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.

Configurer le fichier HTML

Créez un nouveau fichier HTML appelé index.html. Incluez la structure HTML de base et un titre pour votre page.

<!doctype html>
<html>
  <head>
    <title>Ma liste de descriptions</title>
  </head>
  <body></body>
</html>

Créer une liste de descriptions à l'aide de la balise

Dans le corps de votre fichier HTML, créez une liste de descriptions à l'aide de la balise <dl>. La balise <dl> doit être associée à la balise <dt>, qui représente le terme défini, et à la balise <dd>, qui représente la définition du terme.

<dl>
  <dt>Terme 1</dt>
  <dd>Définition 1</dd>
  <dt>Terme 2</dt>
  <dd>Définition 2</dd>
</dl>

Ajouter un style à la liste de descriptions

Pour que la liste de descriptions ait un meilleur aspect, ajoutez-lui un style CSS. Dans cet exemple, nous allons supprimer les marges et le rembourrage en les mettant à zéro, puis ajouter un peu de rembourrage à la balise <dt> pour la faire ressortir.

<style>
  dl {
    margin: 0;
    padding: 0;
  }
  dt {
    padding: 10px;
    font-weight: bold;
  }
</style>

Ajouter du contenu à la liste de descriptions

Maintenant que vous avez une liste de descriptions de base configurée, vous pouvez commencer à ajouter votre propre contenu. Ajoutez simplement de nouvelles paires <dt> et <dd> à la liste pour chaque terme et définition.

<dl>
  <dt>HTML</dt>
  <dd>
    HyperText Markup Language, le langage de balisage standard utilisé pour
    créer des pages web
  </dd>
  <dt>CSS</dt>
  <dd>
    Cascading Style Sheets, un langage utilisé pour décrire la présentation d'un
    document écrit en HTML
  </dd>
  <dt>JavaScript</dt>
  <dd>
    Un langage de programmation utilisé principalement pour développer des
    applications web
  </dd>
</dl>

Enregistrez votre fichier index.html, puis ouvrez-le dans un navigateur web pour afficher votre nouvelle liste de descriptions.

Résumé

Dans ce laboratoire, vous avez appris à utiliser la balise <dl> en HTML pour créer une liste de descriptions avec des termes et des définitions. En utilisant les balises <dt> et <dd>, vous avez pu définir vos termes et fournir des explications pour chacun d'eux. Vous avez également appris à ajouter un style CSS simple à votre liste de descriptions pour qu'elle ait un meilleur aspect sur la page web.

Liste de descriptions HTML