HTML / HTML Tags

HTML <Summary> Tag

Oct 12, 2022
2 min read
HTML summary Tag

Definition

The <summary> tag represents a summary, caption, or legend for its parent <details> element.

Example

<details>
    <summary>My Label</summary>
    Insert your additional information here.
</details>
My Label Insert your additional information here.

Usage

  • Both the opening and closing tags are required.

  • The <summary> element must be the first child of the <details> element.

  • When the <summary> label is clicked by a user, the parent element, <details>, will be toggled open or closed. See also the <details> toggle event.

  • If a <summary> element is not used the browser will apply it’s own legend. For English, the legend would be “Details”. For example:

    <details>
    Insert your additional information here.
    </details>
    Insert your additional information here.

  • You may insert heading, <strong> or other tags as a child of the <summary> element. For example:

    <details>
      <summary><h3>My Label</h3></summary>
      Insert your additional information here.
    </details>

    You should be aware that because the <summary> element has a default ARIA role of button, all roles from child elements are removed. Therefore, the <h3> element in the example would not be announced by screen readers as a heading.

Attributes

The <summary> element only supports the Global Attributes.

Specification

Browser Support

Desktop

ChromeEdgeFirefoxIEOperaSafari
YesYesYesYesYesYes

Mobile

Android WebviewChrome AndroidFirefox AndroidOpera AndroidiOS SafariSamsung Internet
YesYesYesYesYesYes