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
151
|
---
title: <summary>
slug: Web/HTML/Element/summary
tags:
- Element
- HTML
- Reference
- Web
translation_of: Web/HTML/Element/summary
---
<div>{{HTMLRef}}</div>
<p><span class="seoSummary"><strong>HTML 공개 요약 요소</strong> (<strong><code><요약></code></strong>) 요소는 ("상세") 요소의 공개 상자에 대한 요약, 캡션 또는 범례를 지정한다. </span> <code><요약></code> 요소를 클릭하면 부모 <code><상세></code> 요소의 상태가 열리거나 닫힌다.</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="Attributes">Attributes</h2>
<p>This element only includes the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p>
<h2 id="Usage_notes">Usage notes</h2>
<p>The <code><summary></code> element's contents can be any heading content, plain text, or HTML that can be used within a paragraph.</p>
<p>A <code><summary></code> element may <em>only</em> be used as the first child of a <code><details></code> element. When the user clicks on the summary, the parent <code><details></code> element is toggled open or closed, and then a {{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="Examples">Examples</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="Basic_example">Basic example</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("Basic_example", 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>
|
