L'élément HTML <summary> représente une boîte permettant de révéler le contenu d'un résumé ou d'une légende pour le contenu d'un élément <details>. En cliquant sur l'élément <summary>, on passe de l'état affiché à l'état masqué (et vice versa) de l'élément <details> parent.

Contenu autorisé Contenu phrasé ou un élément décrivant du contenu de titre.
Omission de balises Aucune, la balise ouvrante et la balise fermante sont obligatoires.
Parents autorisés Un élément <details>.
Rôles ARIA autorisés button
Interface DOM HTMLElement

Attributs

Cet élément inclut uniquement les attributs universels.

Notes d'utilisation

Un élément <summary> peut contenir des éléments de titre, du texte simple ou tout contenu HTML pouvant être placé au sein d'un paragraphe.

Un élément <summary> peut uniquement être utilisé comme le premier élément fils d'un élément <details>. Lorsque l'utilisateur clique sur le résumé, l'élément <details> parent change d'état (affiché ou masqué) et un évènement toggle est envoyé à l'élément <details> (ce qui permet de détecter un changement d'état via un script).

Libellé par défaut

Si l'élément <summary> est absent au sein d'un élément <details>, c'est le titre contenu dans l'élément <details> qui sera utilisé.

Mise en forme par défaut

La mise en forme par défaut pour <summary> est display:list-item, tel qu'indiqué dans le standard HTML. Cela permet de modifier ou de retirer l'icône affiché pour le contrôle d'affichage/masquage. Par défaut, cette icône st généralement un triange.

Si la mise en forme est surchargée avec display:block, l'icône triangulaire qui révèle le contenu sera masquée.

Voir la section ci-après sur la compatibilité des navigateurs à ce sujet car certains navigateurs ne prennent pas en charge tout ces aspects.

Exemples

Exemple simple

HTML

<details open>
  <summary>Détails produit</summary>
  <p>Ce produit a été fabriqué par
  ACME et respecte les pandas.</p>
</details>

Résultat

Utilisation de titres

Il est possible d'utiliser des titres au sein d'un résumé.

HTML

<details open>
  <summary><h4>Détails produit</h4></summary>
  <ol>
    <li>Date de fabrication : 01 janvier 2018</li>
    <li>Numéro de lot : LMA2542501</li>
    <li>Date limite de consommation : 31 août 2018</li>
  </ol>
</details>

Résultat

Utiliser d'autres éléments HTML

HTML

<details open>
  <summary><strong>Détails</strong></summary>
  <ol>
    <li>Date de fabrication : 01 janvier 2018</li>
    <li>Numéro de lot : LMA2542501</li>
    <li>Date limite de consommation : 31 août 2018</li>
  </ol>
</details>

Résultat

Spécifications

Spécification État Commentaires
HTML Living Standard
La définition de '<summary>' dans cette spécification.
Standard évolutif  
HTML 5.1
La définition de '<summary>' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 12Edge Aucun support Non
Notes
Aucun support Non
Notes
Notes In development.
Firefox Support complet 49IE Aucun support NonOpera Support complet 15Safari Support complet 6WebView Android Support complet 4Chrome Android Support complet OuiEdge Mobile Aucun support Non
Notes
Aucun support Non
Notes
Notes In development.
Firefox Android Support complet 49Opera Android Support complet 14Safari iOS Aucun support NonSamsung Internet Android Support complet Oui
display: list-itemChrome Aucun support Non
Notes
Aucun support Non
Notes
Notes Chrome currently doesn't use display: list-item on the <summary> element, so display: block will not automatically hide the disclosure widget. Instead, use the non-standard pseudo-element ::-webit-details-marker to change the disclosure widget in Chrome. See Chrome bug 590014 for details.
Edge Aucun support NonFirefox Support complet 49IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support Non
Notes
Aucun support Non
Notes
Notes Chrome currently doesn't use display: list-item on the <summary> element, so display: block will not automatically hide the disclosure widget. Instead, use the non-standard pseudo-element ::-webit-details-marker to change the disclosure widget in Chrome. See Chrome bug 590014 for details.
Edge Mobile Aucun support NonFirefox Android Support complet 49Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Voir les notes d'implémentation.
Voir les notes d'implémentation.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, Elanis, louuis, tregagnon, ThePrisoner
Dernière mise à jour par : SphinxKnight,