Pour regrouper plusieurs termes et descriptions, placez un ou plusieurs éléments dt avant un ou plusieurs éléments dd à l'intérieur d'un élément dl. Ce guide montre comment choisir le bon regroupement, créer un petit glossaire dans TextEdit sur un Mac, et vérifier que ses relations restent claires.

Comment une liste de description HTML regroupe-t-elle les termes ?

Une liste de description représente des associations entre des noms et des valeurs. Chaque groupe contient au moins un terme et au moins une description, tous les termes apparaissant avant les descriptions. Le terme suivant une description commence un autre groupe. Ces relations découlent de l'ordre du document. Standard HTML : l'élément dl

Pour un glossaire, un terme peut être un mot de mise en page et sa description peut expliquer ce mot. Plusieurs termes consécutifs peuvent partager une description. Vous n'avez pas besoin de répéter la même explication après chaque nom alternatif. MDN : élément de terme de description

La question pratique est de savoir ce qui appartient ensemble. Avant d'écrire le balisage, notez chaque association prévue en langage ordinaire. Pour cet exemple synthétique, « Gap » et « Gutter » partagent une explication, tandis que « Tile » a deux significations alternatives.

Relation prévue Structure au sein d'un groupe
Un terme avec une description Un dt, puis un dd
Plusieurs termes partageant une description Tous les éléments dt, puis un dd
Un terme avec des descriptions alternatives Un dt, puis plusieurs éléments dd
Plusieurs termes partageant des descriptions alternatives Tous les éléments dt, puis tous les éléments dd
Une description contenant plusieurs paragraphes Un dd contenant les paragraphes

Ces motifs suivent les règles de regroupement du standard. En particulier, des descriptions séparées représentent des valeurs alternatives ; les paragraphes qui appartiennent à une même valeur restent à l'intérieur du même dd. Standard HTML : sémantique des listes de description

Quelles descriptions doivent partager un groupe ?

Utilisez ce test de décision : chaque description du groupe proposé peut-elle raisonnablement s'appliquer à chaque terme de ce groupe ? Si la réponse est non, divisez le contenu en groupes séparés. Il s'agit d'un contrôle éditorial dérivé du modèle d'association, qui aide à repérer les associations accidentelles avant qu'elles n'atteignent la page.

Plusieurs termes avec une description partagée

Ce fragment donne à deux termes de glossaire synthétiques une explication partagée. Les deux termes apparaissent avant la description, correspondant au motif documenté par MDN pour les termes multiples. MDN : Termes multiples, description unique

<dl>
  <dt>Gap</dt>
  <dt>Gutter</dt>
  <dd>The space between adjacent columns.</dd>
</dl>

Ne lisez pas cela comme deux entrées distinctes dont les descriptions seraient manquantes. L'exemple traite délibérément les deux noms comme un seul groupe. Si votre propre glossaire leur attribue des significations différentes, donnez à chaque nom sa propre description.

Un terme avec des descriptions alternatives

Une description peut en suivre une autre au sein du même groupe. Ici, le glossaire inventé utilise « Tile » pour deux concepts différents. MDN : élément de détails de description

<dl>
  <dt>Tile</dt>
  <dd>A repeating unit in a visual pattern.</dd>
  <dd>A rectangular content block in a page layout.</dd>
</dl>

Pour plusieurs noms partageant ces mêmes alternatives, placez les termes supplémentaires avant la première description. Évitez de supposer que le premier terme ne s'associe qu'avec la première description et le second terme seulement avec la seconde : cela nécessiterait des groupes séparés. MDN documente explicitement la combinaison de termes multiples et de descriptions multiples. MDN : Termes multiples et descriptions multiples

Une description avec plusieurs paragraphes

Si le second paragraphe développe la première explication, gardez les deux à l'intérieur d'un seul dd. Un dd accepte du contenu de flux, y compris des paragraphes. Cela préserve une description unique tout en permettant une structure interne lisible. MDN : Résumé technique des détails de description

<dl>
  <dt>Canvas</dt>
  <dd>
    <p>The working area for a composition.</p>
    <p>In this glossary, the term refers to the whole area.</p>
  </dd>
</dl>

Créer un exemple complet dans TextEdit sur votre Mac

Commencez par un nouveau fichier afin de pouvoir examiner le résultat sans modifier un document existant. Dans TextEdit, choisissez Fichier > Nouveau, puis Format > Convertir en texte brut. Apple documente ceci comme point de départ pour la création d'un fichier HTML. Apple : Travailler avec des documents HTML dans TextEdit sur Mac

Collez le document complet ci-dessous. Il combine les trois décisions ci-dessus en un petit glossaire. Chaque groupe possède son propre wrapper div, une structure prise en charge pour appliquer des styles ou des attributs à un groupe entier. MDN : Encapsulation des groupes nom-valeur

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Layout glossary</title>
</head>
<body>
  <h1>Layout glossary</h1>
  <dl>
    <div>
      <dt>Gap</dt>
      <dt>Gutter</dt>
      <dd>The space between adjacent columns.</dd>
    </div>
    <div>
      <dt>Tile</dt>
      <dd>A repeating unit in a visual pattern.</dd>
      <dd>A rectangular content block in a page layout.</dd>
    </div>
    <div>
      <dt>Canvas</dt>
      <dd>
        <p>The working area for a composition.</p>
        <p>In this glossary, the term refers to the whole area.</p>
      </dd>
    </div>
  </dl>
</body>
</html>

Choisissez Fichier > Enregistrer, nommez le fichier layout-glossary.html, puis cliquez sur Enregistrer. Si TextEdit demande quelle extension utiliser, choisissez Utiliser .html. Ce sont les étapes d'enregistrement documentées par Apple pour un fichier HTML écrit à la main. Apple : Créer un fichier HTML

Ouvrez le fichier enregistré dans votre navigateur. Comparez son texte affiché aux trois associations attendues : « Gap » et « Gutter » partagent une explication ; « Tile » a deux descriptions ; « Canvas » a une description contenant deux paragraphes. Utilisez cette comparaison pour vérifier vos relations de contenu prévues, même si l'espacement par défaut du navigateur diffère de votre design préféré.

Conserver le regroupement intact lors de l'édition

HTML prend en charge soit des groupes terme-description directs à l'intérieur de dl, soit des groupes encapsulés dans des éléments div. Choisissez une structure pour l'ensemble d'une liste donnée. Dans la version encapsulée ci-dessus, gardez les termes et les descriptions de chaque groupe directement à l'intérieur de son wrapper ; n'encapsulez pas les termes et les descriptions dans des conteneurs séparés. Standard HTML : modèle de contenu des listes de description

Lorsque vous révisez l'exemple, utilisez cette vérification courte :

  1. Trouvez le groupe que vous souhaitez modifier.
  2. Gardez son ensemble complet de termes avant ses descriptions.
  3. Décidez si le nouveau texte explicatif est une autre valeur ou un autre paragraphe de la valeur actuelle.
  4. Ajoutez un nouveau groupe complet lors de l'introduction d'un terme sans rapport.
  5. Enregistrez le document et rechargez l'aperçu du navigateur.

Par exemple, ajouter « Panel » entre les deux descriptions de « Tile » interromprait la relation prévue : la description suivante appartiendrait au groupe nouvellement commencé. Placez plutôt un nouveau terme et sa description dans leur propre wrapper. Cela suit la règle du standard selon laquelle un terme rencontré après une description démarre un autre groupe. Standard HTML : algorithme de regroupement

Si TextEdit rouvre le fichier en tant que texte formaté, utilisez Fichier > Ouvrir, sélectionnez le document, cliquez sur Afficher les options, et sélectionnez Ignorer les commandes de texte enrichi avant de l'ouvrir. Pour les fichiers futurs, sélectionnez Afficher les fichiers HTML en code HTML au lieu de texte formaté sous TextEdit > Réglages > Ouverture et enregistrement. Apple : Afficher un document HTML en tant que code

Gardez la revue finale concentrée sur le sens : identifiez les termes, identifiez leurs descriptions partagées, et confirmez que les sauts de paragraphe ne deviennent pas accidentellement des valeurs séparées. Une fois ces associations correctes, le glossaire est prêt pour toute mise en forme de présentation dont votre document a besoin.

Sources