HTML <summary> Tag

By Jonathan Griffin. Editor, SEO Consultant, & Developer.

· 2 min read

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>

    Notice

    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