The HTML Disclosure Summary element (<summary>
) element specifies a summary, caption, or legend for a <details>
element's disclosure box. Clicking the <summary>
element toggles the state of the parent <details>
element open and closed.
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 parents | The <details> element. |
Permitted ARIA roles | button |
DOM interface | HTMLElement |
ΠΡΡΠΈΠ±ΡΡΡ
ΠΡΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²ΠΊΠ»ΡΡΠ°Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ Π³Π»ΠΎΠ±Π°Π»ΡΠ½ΡΠ΅ Π°ΡΡΠΈΠ±ΡΡΡ.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΡ
Π‘ΠΎΠ΄Π΅ΡΠΆΠΈΠΌΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° <summary>
ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π»ΡΠ±ΠΎΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, ΠΏΡΠΎΡΡΠΎΠΉ ΡΠ΅ΠΊΡΡ ΠΈΠ»ΠΈ HTML, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π² Π°Π±Π·Π°ΡΠ΅.
ΠΠ»Π΅ΠΌΠ΅Π½Ρ <summary>
ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΏΠΎΡΠΎΠΌΠΊΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° <details>
. ΠΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΊΠ»ΠΈΠΊΠ°Π΅Ρ ΠΏΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ summary, Π΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ - <details>
ΠΌΠ΅Π½ΡΠ΅Ρ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Ρ ΡΠ°ΡΠΊΡΡΡΠΎΠ³ΠΎ ΠΈΠ»ΠΈ Π·Π°ΠΊΡΡΡΠΎΠ³ΠΎ Π½Π° ΠΎΠ±ΡΠ°ΡΠ½ΠΎΠ΅,ΠΈ ΡΠΎΠ³Π΄Π° 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.
ΠΡΠΈΠΌΠ΅ΡΡ
Below are some examples showing <summary>
in use. You can find more examples in the documentation for the <details>
element.
ΠΡΠΎΡΡΠΎΠΉ ΠΏΡΠΈΠΌΠ΅Ρ
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 ΠΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ '<summary>' Π² ΡΡΠΎΠΉ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ. |
ΠΠΈΠ²ΠΎΠΉ ΡΡΠ°Π½Π΄Π°ΡΡ | |
HTML 5.1 ΠΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ '<summary>' Π² ΡΡΠΎΠΉ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ. |
Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΡ | Initial definition |
Browser compatibility
BCD tables only load in the browser