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) :
  1.     <summary>Exemple 1</summary>
  2.     <ul>
  3.         <li>Element details avec summary</li>
  4.     </ul>
  5.     <ul>
  6.         <li>Element details sans summary</li>
  7.     </ul>

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

 

Document créé le 19/03/10 00:00, dernière modification le 23/03/18 09:27
Source du document imprimé : https://www.gaudry.be/html-tag-details-summary.html

L'infobrol est un site personnel dont le contenu n'engage que moi. Le texte est mis à disposition sous licence CreativeCommons(BY-NC-SA). Plus d'info sur les conditions d'utilisation et sur l'auteur.