Maîtriser HTML Details et Summary

Introduction

En HTML, la balise <summary> est utilisée pour créer un élément de synthèse extensible et rétractable pour le contenu présent dans la page web.

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.

Ajout de la balise

Avant d'ajouter la balise <summary>, nous devons créer une section de contenu qui peut être développée ou rétractée. Pour cela, nous utiliserons la balise <details>. Ajoutez le code suivant dans le fichier index.html à l'intérieur de la balise <body>.

<details>
  <summary>Cliquez sur moi pour voir le contenu</summary>
  <p>Le contenu va ici.</p>
</details>

Dans le code ci-dessus, nous avons ajouté une balise de synthèse à l'intérieur de la balise de détails pour définir la synthèse du contenu.

Ajout de l'attribut aria - expanded

Nous pouvons ajouter un attribut aria-expanded à la balise de détails pour indiquer l'état actuel du contenu. Lorsque le contenu est développé, la valeur de aria-expanded sera true, et lorsqu'il est rétracté, la valeur sera false. Ajoutez le code suivant après la balise <summary> pour inclure l'attribut aria-expanded.

<details>
  <summary aria-expanded="false">Cliquez sur moi pour voir le contenu</summary>
  <p>Le contenu va ici.</p>
</details>

Mise en forme de la balise summary

La balise summary n'a pas d'attributs spécifiques, mais nous pouvons la styliser à l'aide de CSS. Ajoutez le code suivant dans la balise <style> pour ajouter une certaine stylisation à la balise summary.

summary {
  padding: 10px;
  background-color: #eee;
  cursor: pointer;
}

Ajout de plus de contenu

Nous pouvons ajouter plus de contenu à l'intérieur de la balise details, et celui-ci sera automatiquement extensible et rétractable. Ajoutez le code suivant après le premier paragraphe pour ajouter plus de contenu.

<details>
  <summary aria-expanded="false">Cliquez sur moi pour voir le contenu</summary>
  <p>Le contenu va ici.</p>
  <p>Plus de contenu.</p>
  <ul>
    <li>Élément de liste 1</li>
    <li>Élément de liste 2</li>
  </ul>
</details>

Ajout de plusieurs sections dépliables

Nous pouvons ajouter plusieurs sections extensibles à la page web. Ajoutez le code suivant pour créer une autre section extensible.

<details>
  <summary aria-expanded="false">Une autre section</summary>
  <p>Contenu de l'autre section</p>
</details>

Résumé

La balise <summary> peut être utilisée pour créer des sections de contenu extensibles et rétractables sur une page web. Nous pouvons ajouter plus de contenu à l'intérieur de la balise details et utiliser la mise en forme pour personnaliser l'apparence de la balise summary. En ajoutant l'attribut aria-expanded, nous pouvons indiquer l'état actuel du contenu, ce qui le rend accessible aux utilisateurs ayant des handicaps.

HTML Details Summary