Les balises details et summary en HTML5 permettent de masquer ou d’afficher un bloc de contenu par défaut. Cette fonctionnalité est particulièrement utile pour organiser de longues sections de contenu ou pour fournir des informations supplémentaires que l’utilisateur peut choisir d’afficher ou non.
À quoi servent les balises details et summary ?
La balise <details> est utilisée pour créer des éléments de contenu extensibles qui peuvent être ouverts ou fermés par l’utilisateur. Elle agit comme un conteneur pour le contenu supplémentaire, tandis que la balise <summary> est utilisée pour fournir un titre ou un résumé qui sera toujours visible même lorsque le contenu est réduit.
Syntaxe et utilisation des balises details et summary
La balise <details> en HTML5 permet de masquer ou d’afficher un bloc de contenu par défaut. Cette fonctionnalité est particulièrement utile pour organiser de longues sections de contenu ou pour fournir des informations supplémentaires que l’utilisateur peut choisir d’afficher ou non.
Comment fonctionnent les balises <details> et <summary>
La balise <summary> contient le texte qui sera affiché lorsque le bloc de contenu est masqué. Le bloc de contenu lui-même est placé entre les balises <summary> et </summary>.
<details>
<summary>Détails supplémentaires</summary>
<!-- Contenu supplémentaire -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed odio velit. Sed id risus neque, a laoreet lectus. Donec ut libero leo, sed aliquam erat. Maecenas sit amet diam vitae mi mollis semper. Sed et felis ac quam mollis ultricies. Donec sit amet tellus velit, sit amet ultricies dolor varius.</p>
</details>Dans cet exemple, le texte Détails supplémentaires sera affiché même si le bloc de contenu est masqué. Lorsque l’utilisateur clique sur le texte, le bloc de contenu sera affiché.
Détails supplémentaires
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed odio velit. Sed id risus neque, a laoreet lectus. Donec ut libero leo, sed aliquam erat. Maecenas sit amet diam vitae mi mollis semper. Sed et felis ac quam mollis ultricies. Donec sit amet tellus velit, sit amet ultricies dolor varius.
Exemple concret : FAQ extensible
Dans l’exemple ci-dessous, chaque question de la FAQ est encapsulée dans une balise <details>, permettant à l’utilisateur de cliquer sur chaque titre pour afficher ou masquer la réponse associée.
<details>
<summary>Qu'est-ce que le HTML ?</summary>
<p>HTML, acronyme de HyperText Markup Language, est le langage standard utilisé pour créer des pages web.</p>
</details>
<details>
<summary>Qu'est-ce que le CSS ?</summary>
<p>CSS, acronyme de Cascading Style Sheets, est un langage de feuilles de style utilisé pour définir la présentation des documents HTML.</p>
</details>Qu’est-ce que le HTML ?
HTML, acronyme de HyperText Markup Language, est le langage standard utilisé pour créer des pages web.
Qu’est-ce que le CSS ?
CSS, acronyme de Cascading Style Sheets, est un langage de feuilles de style utilisé pour définir la présentation des documents HTML.
Attributs de la balise <details>
La balise <details> dispose de quelques attributs utiles pour personnaliser son comportement :
open: Cet attribut, lorsqu’il est présent, indique que le contenu est initialement ouvert par défaut.onToggle: Cet attribut permet de spécifier une fonction JavaScript à exécuter lorsque l’utilisateur ouvre ou ferme le contenu.
Exemples concrets d’utilisation de la balise <details>
- Masquer les détails d’un produit : Une section de détails d’un produit sur une page de commerce électronique peut être masquée par défaut, avec un bouton En savoir plus qui permet d’afficher les détails.
- Masquer des informations supplémentaires sur un article : Un article de blog peut avoir une section En savoir plus » qui contient des informations supplémentaires que l’utilisateur peut choisir d’afficher.
- Masquer des options avancées d’un formulaire : Un formulaire peut avoir une section Options avancées qui est masquée par défaut, avec un bouton Afficher les options avancées qui permet d’afficher les options.
La balise <details> est un outil précieux pour créer des pages web plus organisées et plus conviviales. Elle permet d’améliorer la lisibilité, l’expérience utilisateur et l’accessibilité du contenu. En plus des exemples concrets mentionnés ci-dessus, voici quelques autres idées d’utilisation de la balise <details> : Masquer les sections de questions fréquentes (FAQ), masquer les définitions de termes techniques, masquer les spoilers dans les articles ou les forums…
Avantages de l’utilisation des balises <details> et <summary>
- Expérience utilisateur améliorée : Les éléments extensibles permettent aux utilisateurs de naviguer plus facilement dans le contenu, en se concentrant sur ce qui les intéresse vraiment.
- Organisation du contenu : La balise <details> aide à organiser le contenu en le rendant plus modulaire, ce qui peut rendre la lecture plus fluide.
- Accessibilité : L’utilisation appropriée de la balise <details> peut améliorer l’accessibilité en réduisant le désordre et en rendant le contenu plus facile à digérer pour tous les utilisateurs.
La balise <details> est un outil polyvalent pour créer des contenus extensibles et interactifs sur le web. En permettant aux utilisateurs de contrôler quels éléments ils veulent explorer davantage, elle contribue à améliorer l’expérience utilisateur et à rendre la navigation sur le web plus intuitive. Que ce soit pour créer une FAQ, des articles avec du contenu supplémentaire, ou d’autres types de contenus extensibles, la balise <details> offre une solution élégante et efficace pour organiser et présenter des informations sur le web.
