HTML 공개 요약 요소 (
<요약>) 요소는 ("상세") 요소의 공개 상자에 대한 요약, 캡션 또는 범례를 지정한다.
<요약> 요소를 클릭하면 부모
<상세> 요소의 상태가 열리거나 닫힌다.
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 https://github.com/mdn/interactive-examples and send us a pull request.
|Permitted content||Phrasing content or one element of Heading content|
|Tag omission||None, both the start tag and the end tag are mandatory.|
|Permitted ARIA roles||
This element only includes the global attributes.
<summary> element's contents can be any heading content, plain text, or HTML that can be used within a paragraph.
<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
<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.
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.
Below are some examples showing
<summary> in use. You can find more examples in the documentation for the
A simple example showing the use of
<summary> in a
<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>
|HTML Standard |
BCD tables only load in the browser