1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
|
---
title: '<summary> : l''élément de révélation d''un résumé'
slug: Web/HTML/Element/summary
tags:
- Element
- HTML
- Reference
- Web
translation_of: Web/HTML/Element/summary
---
{{HTMLRef}}
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 {{HTMLElement("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.
{{EmbedInteractiveExample("pages/tabbed/summary.html","tabbed-shorter")}}
## Attributs
Cet élément inclut uniquement [les attributs universels](/fr/docs/Web/HTML/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 {{event("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 {{HTMLElement("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](https://html.spec.whatwg.org/multipage/rendering.html#the-details-and-summary-elements). 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
{{EmbedLiveSample("Exemple_simple","100%","160")}}
### 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
{{EmbedLiveSample("Utilisation_de_titres", 650, 120)}}
### 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
{{EmbedLiveSample("Utiliser_avec_divers_éléments_HTML", 650, 120)}}
## Résumé technique
<table class="properties">
<tbody>
<tr>
<th scope="row">Contenu autorisé</th>
<td>
<a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9"
>Contenu phrasé</a
>
ou un élément décrivant du
<a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_titre"
>contenu de titre</a
>.
</td>
</tr>
<tr>
<th scope="row">Omission de balises</th>
<td>
Aucune, la balise ouvrante et la balise fermante sont obligatoires.
</td>
</tr>
<tr>
<th scope="row">Parents autorisés</th>
<td>Un élément {{HTMLElement("details")}}.</td>
</tr>
<tr>
<th scope="row">Rôles ARIA autorisés</th>
<td>{{ARIARole("button")}}</td>
</tr>
<tr>
<th scope="row">Interface DOM</th>
<td>{{domxref("HTMLElement")}}</td>
</tr>
</tbody>
</table>
## Spécifications
| Spécification | État | Commentaires |
| -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
| {{SpecName('HTML WHATWG', 'interactive-elements.html#the-summary-element', '<summary>')}} | {{Spec2('HTML WHATWG')}} | |
| {{SpecName('HTML5.1', 'interactive-elements.html#the-summary-element', '<summary>')}} | {{Spec2('HTML5.1')}} | Définition initiale. |
## Compatibilité des navigateurs
{{Compat("html.elements.summary")}}
## Voir aussi
- {{HTMLElement("details")}}
|
