<summary>: The Disclosure Summary element
<summary> HTML 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.
|Permitted content||Phrasing content or one element of Heading content|
|Tag omission||None, both the start tag and the end tag are mandatory.|
|Implicit ARIA role||
|Permitted ARIA roles||No
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.
<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>
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.
Warning: Because the
<summary> element has a default role of button (which strips all roles from child elements), this example will not work for users of assistive technologies such as screen readers. The
<h4> will have its role removed and thus will not be treated as a heading for these users.
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 (HTML)|
BCD tables only load in the browser