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
|
---
title: '<summary>: The Disclosure Summary element'
slug: Web/HTML/Element/summary
translation_of: Web/HTML/Element/summary
---
<div>{{HTMLRef}}</div>
<p><span class="seoSummary">The <strong>HTML Disclosure Summary element</strong> (<strong><code><summary></code></strong>) element specifies a summary, caption, or legend for a {{HTMLElement("details")}} element's disclosure box.</span> Clicking the <code><summary></code> element toggles the state of the parent <code><details></code> element open and closed.</p>
<div>{{EmbedInteractiveExample("pages/tabbed/summary.html","tabbed-shorter")}}</div>
<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>
<table class="properties">
<tbody>
<tr>
<th scope="row">Permitted content</th>
<td><a href="/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">Phrasing content</a> or one element of <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Heading_content">Heading content</a></td>
</tr>
<tr>
<th scope="row">Tag omission</th>
<td>None, both the start tag and the end tag are mandatory.</td>
</tr>
<tr>
<th scope="row">Permitted parents</th>
<td>The {{HTMLElement("details")}} element.</td>
</tr>
<tr>
<th scope="row">Permitted ARIA roles</th>
<td>{{ARIARole("button")}}</td>
</tr>
<tr>
<th scope="row">DOM interface</th>
<td>{{domxref("HTMLElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="Атрибуты">Атрибуты</h2>
<p>Этот элемент включает только <a href="/en-US/docs/Web/HTML/Global_attributes">глобальные атрибуты</a>.</p>
<h2 id="Примечания">Примечания</h2>
<p>Содержимым элемента <code><summary></code> может быть любой заголовок, простой текст или HTML, которые можно использовать в абзаце.</p>
<p>Элемент <code><summary></code> может быть использован в качестве потомка элемента <code><details></code> . Когда пользователь кликает по элементу summary, его родитель - <code><details></code> меняет состояние с раскрытого или закрытого на обратное,и тогда {{event("toggle")}} event is sent to the <code><details></code> element, which can be used to let you know when this state change occurs.</p>
<h3 id="Default_label_text">Default label text</h3>
<p>If a <code><details></code> element's first child is not a <code><summary></code> element, the {{Glossary("user agent")}} will use a default string (typically "Details") as the label for the disclosure box.</p>
<h3 id="Default_style">Default style</h3>
<p>Per the HTML specification, the default style for <code><summary></code> elements includes <code>display: list-item</code>. This makes it possible to change or remove the icon displayed as the disclosure widget next to the label from the default, which is typically a triangle.</p>
<p>You can also change the style to <code>display: block</code> to remove the disclosure triangle.</p>
<p>See the {{anch("Browser compatibility")}} section for details, as not all browsers support full functionality of this element yet.</p>
<h2 id="Примеры">Примеры</h2>
<p>Below are some examples showing <code><summary></code> in use. You can find more examples in the documentation for the {{HTMLElement("details")}} element.</p>
<h3 id="Простой_пример">Простой пример</h3>
<p>A simple example showing the use of <code><summary></code> in a {{HTMLElement("details")}} element:</p>
<pre class="brush: html"><details open>
<summary>Overview</summary>
<ol>
<li>Cash on hand: $500.00</li>
<li>Current invoice: $75.30</li>
<li>Due date: 5/6/19</li>
</ol>
</details></pre>
<p>{{EmbedLiveSample("Простой_пример", 650, 120)}}</p>
<h3 id="Summaries_as_headings">Summaries as headings</h3>
<p>You can use heading elements in <code><summary></code>, like this:</p>
<pre class="brush: html"><details open>
<summary><h4>Overview</h4></summary>
<ol>
<li>Cash on hand: $500.00</li>
<li>Current invoice: $75.30</li>
<li>Due date: 5/6/19</li>
</ol>
</details></pre>
<p>{{EmbedLiveSample("Summaries_as_headings", 650, 120)}}</p>
<p>This currently has some spacing issues that could be addressed using CSS.</p>
<h3 id="HTML_in_summaries">HTML in summaries</h3>
<p>This example adds some semantics to the <code><summary></code> element to indicate the label as important:</p>
<pre class="brush: html"><details open>
<summary><strong>Overview</strong></summary>
<ol>
<li>Cash on hand: $500.00</li>
<li>Current invoice: $75.30</li>
<li>Due date: 5/6/19</li>
</ol>
</details></pre>
<p>{{EmbedLiveSample("HTML_in_summaries", 650, 120)}}</p>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</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>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{Compat("html.elements.summary")}}</p>
<h2 id="See_also">See also</h2>
<ul>
<li>{{HTMLElement("details")}}</li>
</ul>
|
