HTML5 : les balises <details> et <summary>

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

Code HTML5 (Exemples) (11 lignes)

<details>
    <summary>Exemple 1</summary>
    <ul>
        <li>Element details avec summary</li>
    </ul>
</details>
<details>
    <ul>
        <li>Element details sans summary</li>
    </ul>
</details>

Retourner au début du code

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.