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>Overview</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

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple12 Non149 Non156
display: list-item Non2 Non49 Non Non Non
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple4 Oui Non14914 Non Oui
display: list-item Non Non2 Non49 Non Non Non

1. In development.

2. 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.

Voir aussi

Étiquettes et contributeurs liés au document

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