<summary>

번역이 완료되지 않았습니다. Please help translate this article from English

HTML 공개 요약 요소 (<요약>) 요소는 ("상세") 요소의 공개 상자에 대한 요약, 캡션 또는 범례를 지정한다.  <요약> 요소를 클릭하면 부모 <상세> 요소의 상태가 열리거나 닫힌다.

Permitted content Phrasing content or one element of Heading content
Tag omission None, both the start tag and the end tag are mandatory.
Permitted parents The <details> element.
Permitted ARIA roles button
DOM interface HTMLElement

Attributes

This element only includes the global attributes.

Usage notes

The <summary> element's contents can be any heading content, plain text, or HTML that can be used within a paragraph.

A <summary> element may only be used as the first child of a <details> element. When the user clicks on the summary, the parent <details> element is toggled open or closed, and then a toggle event is sent to the <details> element, which can be used to let you know when this state change occurs.

Default label text

If a <details> element's first child is not a <summary> element, the user agent will use a default string (typically "Details") as the label for the disclosure box.

Default style

Per the HTML specification, the default style for <summary> elements includes display: list-item. 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.

You can also change the style to display: block to remove the disclosure triangle.

See the Browser compatibility section for details, as not all browsers support full functionality of this element yet.

Examples

Below are some examples showing <summary> in use. You can find more examples in the documentation for the <details> element.

Basic example

A simple example showing the use of <summary> in a <details> element:

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

Summaries as headings

You can use heading elements in <summary>, like this:

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

This currently has some spacing issues that could be addressed using CSS.

HTML in summaries

This example adds some semantics to the <summary> element to indicate the label as important:

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

Specifications

Specification Status Comment
HTML Living Standard
The definition of '<summary>' in that specification.
Living Standard
HTML 5.1
The definition of '<summary>' in that specification.
Recommendation Initial definition

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
summaryChrome Full support 12Edge Full support 79Firefox Full support 49IE No support NoOpera Full support 15Safari Full support 6WebView Android Full support 4Chrome Android Full support YesFirefox Android Full support 49Opera Android Full support 14Safari iOS Full support YesSamsung Internet Android Full support Yes
display: list-itemChrome No support No
Notes
No support No
Notes
Notes Chrome currently doesn't use display: list-item on the <summary> element, so display: block will not automatically hide the disclosure widget. Instead, use the non-standard pseudo-element ::-webkit-details-marker to change the disclosure widget in Chrome. See bug 590014 for details.
Edge No support No
Notes
No support No
Notes
Notes Edge currently doesn't use display: list-item on the <summary> element, so display: block will not automatically hide the disclosure widget. Instead, use the non-standard pseudo-element ::-webkit-details-marker to change the disclosure widget in Edge. See bug 590014 for details.
Firefox Full support 49IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support No
Notes
No support No
Notes
Notes Chrome currently doesn't use display: list-item on the <summary> element, so display: block will not automatically hide the disclosure widget. Instead, use the non-standard pseudo-element ::-webkit-details-marker to change the disclosure widget in Chrome. See bug 590014 for details.
Firefox Android Full support 49Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.

See also