<summary> : l'élément de révélation d'un résumé
===============================================

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.

Exemple interactif
------------------

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` (en-US) 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 est généralement un triangle.

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


```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


```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 avec divers éléments HTML

#### 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

Résumé technique
----------------

|  |  |
| --- | --- |
| 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` |

Spécifications
--------------

| Specification |
| --- |
| HTML Standard # the-summary-element |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `<details>`