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
148
149
150
|
---
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
---
<div>{{HTMLRef}}</div>
<p>L'élément HTML <strong><code><summary></code></strong> 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 <code><summary></code>, on passe de l'état affiché à l'état masqué (et vice versa) de l'élément <code><details></code> parent.</p>
<div>{{EmbedInteractiveExample("pages/tabbed/summary.html","tabbed-shorter")}}</div>
<h2 id="Attributs">Attributs</h2>
<p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
<h2 id="Notes_dutilisation">Notes d'utilisation</h2>
<p>Un élément <code><summary></code> peut contenir des éléments de titre, du texte simple ou tout contenu HTML pouvant être placé au sein d'un paragraphe.</p>
<p>Un élément <code><summary></code> peut uniquement être utilisé comme le premier élément fils d'un élément <code><details></code>. Lorsque l'utilisateur clique sur le résumé, l'élément <code><details></code> parent change d'état (affiché ou masqué) et un évènement {{event("toggle")}} est envoyé à l'élément <code><details></code> (ce qui permet de détecter un changement d'état via un script).</p>
<h3 id="Libellé_par_défaut">Libellé par défaut</h3>
<p>Si l'élément <code><summary></code> est absent au sein d'un élément <code><details></code>, c'est le titre contenu dans l'élément {{HTMLElement("details")}} qui sera utilisé.</p>
<h3 id="Mise_en_forme_par_défaut">Mise en forme par défaut</h3>
<p>La mise en forme par défaut pour <code><summary></code> est <code>display: list-item</code>, tel qu'indiqué dans <a href="https://html.spec.whatwg.org/multipage/rendering.html#the-details-and-summary-elements">le standard HTML</a>. 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.</p>
<p>Si la mise en forme est surchargée avec <code>display: block</code>, l'icône triangulaire qui révèle le contenu sera masquée.</p>
<p>Voir la section ci-après sur la compatibilité des navigateurs à ce sujet car certains navigateurs ne prennent pas en charge tout ces aspects.</p>
<h2 id="Exemples">Exemples</h2>
<h3 id="Exemple_simple">Exemple simple</h3>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><details open>
<summary>Détails produit</summary>
<p>Ce produit a été fabriqué par
ACME et respecte les pandas.</p>
</details></pre>
<h4 id="Résultat">Résultat</h4>
<p>{{EmbedLiveSample("Exemple_simple","100%","160")}}</p>
<h3 id="Utilisation_de_titres">Utilisation de titres</h3>
<p>Il est possible d'utiliser des titres au sein d'un résumé.</p>
<h4 id="HTML_2">HTML</h4>
<pre class="brush: 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></pre>
<h4 id="Résultat_2">Résultat</h4>
<p>{{EmbedLiveSample("Utilisation_de_titres", 650, 120)}}</p>
<h3 id="Utiliser_avec_divers_éléments_HTML">Utiliser avec divers éléments HTML</h3>
<h4 id="HTML_3">HTML</h4>
<pre class="brush: 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></pre>
<h4 id="Résultat_3">Résultat</h4>
<p>{{EmbedLiveSample("Utiliser_avec_divers_éléments_HTML", 650, 120)}}</p>
<h2 id="Résumé_technique">Résumé technique</h2>
<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>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">État</th>
<th scope="col">Commentaires</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'interactive-elements.html#the-summary-element', '<summary>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML5.1', 'interactive-elements.html#the-summary-element', '<summary>')}}</td>
<td>{{Spec2('HTML5.1')}}</td>
<td>Définition initiale.</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<p>{{Compat("html.elements.summary")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>{{HTMLElement("details")}}</li>
</ul>
|
