L'élémentHTML<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.

Exemple interactif

<details>  <summary>    J'ai des clés mais pas de portes. J'ai de l'espace mais pas de pièce. Vous    pouvez entrer mais ne pouvez pas sortir. Qui suis-je&nbsp;?  </summary>  Un clavier.</details>

details {  border: 1px solid #aaa;  border-radius: 4px;  padding: 0.5em 0.5em 0;}summary {  font-weight: bold;  margin: -0.5em -0.5em 0;  padding: 0.5em;}details[open] {  padding: 0.5em;}details[open] summary {  border-bottom: 1px solid #aaa;  margin-bottom: 0.5em;}

Attributs

Cet élément inclut uniquementles 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·ice clique sur le résumé, l'élément<details> parent change d'état (affiché ou masqué) et un évènementtoggle est envoyé à l'élément<details> (ce qui permet de détecter un changement d'état via un script).

Le contenu de l'élément<details> fournit ladescription accessible pour l'élément<summary>.

Libellé par défaut

Si le premier enfant d'un élément<details> n'est pas un élément<summary>,l'agent utilisateur utilisera une chaîne de caractères par défaut (généralement « Détails ») comme libellé pour la boîte de révélation.

Mise en forme par défaut

Conformément à la spécification HTML, le style par défaut pour les éléments<summary> inclutdisplay: list-item. Cela permet de changer ou de supprimer l'icône affichée comme widget à côté du libellé, qui est généralement un triangle.

Vous pouvez aussi changer le style endisplay: block pour supprimer le triangle.

Voir la sectionCompatibilité des navigateurs pour plus de détails, car tous les navigateurs ne prennent pas encore en charge toutes les fonctionnalités de cet élément.

Pour les navigateurs basés sur WebKit, comme Safari, il est possible de contrôler l'affichage de l'icône via le pseudo-élément CSS non standard::-webkit-details-marker. Pour supprimer le triangle, utilisezsummary::-webkit-details-marker { display: none }.

Exemples

Voici quelques exemples montrant l'utilisation de<summary>. Vous pouvez trouver d'autres exemples dans la documentation de l'élément<details>.

Exemple simple

Un exemple simple montrant l'utilisation de<summary> dans un élément<details> :

HTML

<details open>  <summary>Détails produit</summary>  <ol>    <li>Date de fabrication&nbsp;: 01 janvier 2018</li>    <li>Numéro de lot&nbsp;: LMA2542501</li>    <li>Date limite de consommation&nbsp;: 31 août 2018</li>  </ol></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&nbsp;: 01 janvier 2018</li>    <li>Numéro de lot&nbsp;: LMA2542501</li>    <li>Date limite de consommation&nbsp;: 31 août 2018</li>  </ol></details>

Résultat

Il existe actuellement quelques problèmes d'espacement qui peuvent être corrigés à l'aide de CSS.

Utiliser des éléments HTML dans un résumé

Cet exemple ajoute une certaine sémantique à l'élément<summary> pour indiquer que le libellé est important :

HTML

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

Résultat

Changer l'icône du résumé

Le marqueur de l'élément<summary>, c'est-à-dire le triangle de révélation, peut être personnalisé avec CSS. Le marqueur peut être ciblé à l'aide du pseudo-élément::marker, qui accepte la propriété abrégéelist-style ainsi que ses propriétés détaillées, commelist-style-type. Cela permet de remplacer le triangle par une image (généralement aveclist-style-image) ou une chaîne de caractères (y compris des émojis). Dans cet exemple, nous remplaçons le contenu d'un widget de révélation et supprimons l'icône d'un autre en appliquantlist-style: none avant d'ajouter une icône personnalisée via du contenu généré.

CSS

Dans le premier widget de révélation, nous mettons en forme le::marker, en modifiant la propriétécontent selon l'attribut[open] de l'élément<details>. Pour le second widget, nous supprimons le marqueur avec les propriétéslist-style, puis nous ajoutons un contenu généré stylisé avec le pseudo-élément::after. Nous incluons également des styles pour::-webkit-details-marker afin de cibler Safari. Le sélecteur pour le pseudo-élément spécifique au navigateur est inclus dans une pseudo-classe:is() afin de ne pas invalider la liste des sélecteurs.

details {  font-size: 1rem;  font-family: "Open Sans", Calibri, sans-serif;  border: solid;  padding: 2px 6px;  margin-bottom: 1em;}details:first-of-type summary::marker,:is(::-webkit-details-marker) {  content: "+ ";  font-family: monospace;  color: red;  font-weight: bold;}details[open]:first-of-type summary::marker {  content: "− ";}details:last-of-type summary {  list-style: none;  &::after {    content: "+";    color: white;    background-color: darkgreen;    border-radius: 1em;    font-weight: bold;    padding: 0 5px;    margin-inline-start: 5px;  }  [open] &::after {    content: "−";  }}details:last-of-type summary::-webkit-details-marker {  display: none;}

Le CSS inclut lesélecteur d'attribut[open], qui ne correspond que lorsque l'attributopen est présent (c'est-à-dire lorsque l'élément<details> est ouvert). Les pseudo-classes:first-of-type et:last-of-type ciblent respectivement le premier et le dernier élément du même type. Nous avons inclus le pseudo-élément préfixé-webkit- dans une pseudo-classe:is() car elle accepte uneliste de sélecteurs tolérante : si le pseudo-élément préfixé est invalide dans un navigateur, tout le bloc de sélecteurs ne sera pas invalidé. Nous avons aussi utilisé lasyntaxe imbriquée de CSS. Voir le moduleSélecteurs CSS.

HTML

<h1>Citations d'Helen Keller</h1><details>  <summary>Sur les droits des femmes</summary>  <p>    <q>Nous avons prié, nous avons supplié, nous avons imploré pour obtenir le droit de vote, dans l'espoir que les hommes, par chevalerie, accorderaient l'égalité des droits aux femmes et les associeraient aux affaires de l'État. Nous espérions que leur bon sens l'emporterait sur les préjugés et la stupidité. Nous pensions que leur sens tant vanté de la justice surmonterait les erreurs qui entravent si souvent l'esprit humain&nbsp;; mais nous sommes toujours reparties les mains vides. Nous ne supplierons plus.</q>  </p></details><details>  <summary>Sur l'optimisme</summary>  <p>    <q>L'optimisme est la foi qui mène à la réussite&nbsp;; rien ne peut être accompli sans espoir.</q>  </p></details>

Résultat

Résumé technique

Spécifications

Compatibilité des navigateurs

Voir aussi

• L'élément<details>