No cache version.

Caching disabled. Default setting for this page:enabled (code LNG204)
If the display is too slow, you can disable the user mode to view the cached version.

HTML5 : les balises <details> et <summary>

Contents

HTML5 apporte de nouveaux éléments qui permettent de définir encore mieux la sémantique de notre contenu.

Les balises details et summary permettent d'apporter du contenu complémentaire au document HTML.

L'élément details contient d'abord un titre (une légende) sous forme d'élément summary.

HTML5 : affichage de details et summary

Syntaxe details et summary

  1. <details>
  2.     <summary>Exemple 1</summary>
  3.     <ul>
  4.         <li>Element details avec summary</li>
  5.     </ul>
  6. </details>
  7. <details>
  8.     <ul>
  9.         <li>Element details sans summary</li>
  10.     </ul>
  11. </details>

Exemple details et summary

Exemple 1
  • Element details avec summary
  • Element details sans summary

HTML5 : details et summary ne s'affichent pas

Au moment de la rédaction de ce document, certains navigateurs, comme Internet Explorer, ne prennent pas en compte les balises details et summary, et n'affichent donc pas le contenu des détails.

Nous pouvons résoudre ce problème en utilisant le style display:block; pour les éléments details et summary.

HTML5 : exemple de tags details et summary

Clark Savage, Jr.
  • Pseudo: Doc Savage, L'Homme de bronze
  • Spécialité: médecin, chirurgien, scientifique, aventurier, inventeur, explorateur, chercheur, et musicien
Theodore Marley Brooks
  • Pseudo: "Ham"
  • Spécialité: avocat
  • Grade: brigadier général
Andrew Blodgett Mayfair
  • Pseudo: "Monk"
  • Spécialité: chimiste
  • Grade: lieutenant-colonel
John Renwick
  • Pseudo: "Renny"
  • Spécialité: ingénieur
  • Grade: colonel
Thomas J. Roberts
  • Pseudo: "Long Tom"
  • Spécialité: électricien
  • Grade: major
William Harper Littlejohn
  • Pseudo: "Johnny"
  • Spécialité: archéologue et géologue
Patricia Savage
  • Pseudo: "Pat"
  • Cousine de Doc savage

English translation

You have asked to visit this site in English. For now, only the interface is translated, but not all the content yet.

If you want to help me in translations, your contribution is welcome. All you need to do is register on the site, and send me a message asking me to add you to the group of translators, which will give you the opportunity to translate the pages you want. A link at the bottom of each translated page indicates that you are the translator, and has a link to your profile.

Thank you in advance.

Document created the 19/03/2010, last modified the 26/10/2018
Source of the printed document:https://www.gaudry.be/en/html-tag-details-summary.html

The infobrol is a personal site whose content is my sole responsibility. The text is available under CreativeCommons license (BY-NC-SA). More info on the terms of use and the author.