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>

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

• HTML Living Standard Specification
• HTML5 Specification

Browser Support

Desktop

Mobile