HTML5 : les balises <details> et <summary>

Inhaltsverzeichnis

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

Deutsche Übersetzung

Sie haben gebeten, diese Seite auf Deutsch zu besuchen. Momentan ist nur die Oberfläche übersetzt, aber noch nicht der gesamte Inhalt.

Wenn Sie mir bei Übersetzungen helfen wollen, ist Ihr Beitrag willkommen. Alles, was Sie tun müssen, ist, sich auf der Website zu registrieren und mir eine Nachricht zu schicken, in der Sie gebeten werden, Sie der Gruppe der Übersetzer hinzuzufügen, die Ihnen die Möglichkeit gibt, die gewünschten Seiten zu übersetzen. Ein Link am Ende jeder übersetzten Seite zeigt an, dass Sie der Übersetzer sind und einen Link zu Ihrem Profil haben.

Vielen Dank im Voraus.

Dokument erstellt 19/03/2010, zuletzt geändert 26/10/2018
Quelle des gedruckten Dokuments:https://www.gaudry.be/de/html-tag-details-summary.html

Die Infobro ist eine persönliche Seite, deren Inhalt in meiner alleinigen Verantwortung liegt. Der Text ist unter der CreativeCommons-Lizenz (BY-NC-SA) verfügbar. Weitere Informationen auf die Nutzungsbedingungen und dem Autor.