Web/HTML/Element/summary

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.
Implicit ARIA role	`button`
Permitted ARIA roles	No `role` permitted
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.

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.

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 StandardThe definition of '<summary>' in that specification.	Living Standard
HTML 5.1The definition of '<summary>' in that specification.	Recommendation	Initial definition

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`summary`	Chrome Full support 12	Edge Full support 79	Firefox Full support 49	IE No support No	Opera Full support 15	Safari Full support 6	WebView Android Full support 4	Chrome Android Full support Yes	Firefox Android Full support 49	Opera Android Full support 14	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
`display: list-item`	Chrome 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 49	IE No support No	Opera No support No	Safari No support No	WebView Android No support No	Chrome 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 49	Opera Android No support No	Safari iOS No support No	Samsung Internet Android No support No

Legend

Full support: Full support
No support: No support
See implementation notes.': See implementation notes.