HTML <summary> Element
The HTML <summary> element provides the visible label or heading for a <details> element that users can select to show or hide additional content.
Syntax
<details>
<summary>What is HTML?</summary>
<p>HTML is the markup language used to structure webpage content.</p>
</details>The <summary> element requires both an opening and closing tag. It is used as the first child of a <details> element and acts as the control that opens and closes the disclosure.
Attributes
The <summary> element supports the global HTML attributes. It does not have any element-specific attributes.
Example
This example uses several <summary> elements to create expandable questions. Select a question to display its answer.
Usage Notes
The <summary> element works together with the <details> element to create a built-in disclosure control without requiring JavaScript.
The <summary> element should be the first child of its <details> element. The remaining content inside <details> is shown when the disclosure is open and hidden when it is closed.
Users can select the summary to toggle the <details> element between its open and closed states. Browsers normally display a disclosure marker next to the summary to indicate its current state.
If a <details> element does not contain a <summary> element, the browser provides its own default label for the disclosure control.
Use summary text that clearly describes the content that will be revealed. Short questions, headings, or descriptive labels usually work well.
Accessibility
The native combination of <details> and <summary> provides built-in interactive behavior and can be operated with a keyboard, making it preferable to recreating a disclosure control with non-semantic elements.
Write clear and descriptive summary text so users can understand what information will become available when the section is expanded.
Avoid placing unnecessarily complicated interactive content inside <summary>. The summary itself serves as the control for opening and closing the associated details.
Browser Support
Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.
For detailed browser compatibility information, see Can I Use: HTML <summary> Element .
Related Elements
The <summary> element is directly related to the <details> element, which contains the expandable content controlled by the summary.