<summary> Tag

The <summary> tag serves as a summary or title for the interactive widget created by the <details> tag.

Note:
To use the <summary> tag effectively, you need to understand the <details> tag.

The <details> tag defines content that users can choose to open or close.

HTML The <summary>> tag serves as a summary or title for the interactive widget created by the <details> tag. 
<details>
    <summary>Summary content</summary>
    Additional information or details.
</details>

By default, the <summary> tag displays a marker shaped like a ► arrow.

How It Appears in Browsers Users can click the text labeled "Summary content" to reveal or hide the additional details.

The <details> and <summary> Tags

The <summary> tag must be a descendant of a <details> tag.
However, the <details> tag does not require a <summary> tag as a mandatory child.

While the <summary> tag is not strictly required within <details>, omitting it is discouraged from an accessibility standpoint. Screen readers rely on the summary to provide context to users before reading the expandable content. Refer to the Things to Keep in Mind section for more details.

When <summary> Is Present Within <details>

The <summary> tag represents the title of the <details> widget.

HTML 
<details>
    <summary>Summary content</summary> <!-- The <summary> tag represents the title -->
    Additional information or details.
</details>
How It Appears in Browsers When the <summary> tag is used to represent the title, it appears as follows:

When <summary> Is Not Used Within <details>

When the <summary> tag is not used, the user agent (browser) provides a default title (e.g., "Details").
This default text is localized based on the browser's language settings, so it may appear differently depending on the user's environment.

Example with the <summary> Tag:

HTML 
<details>
    Additional information or details.
</details>
How It Appears in Browsers The browser displays a default label, typically "Details", in place of a custom title.
This label is localized and may appear in different languages based on the user's browser settings.

When using the <summary> tag, there are several important considerations to be aware of.

Position of the <summary> Tag

The <summary> tag serves as the title or summary for the collapsible content.
For accessibility reasons—especially for screen reader users—it should be marked up as the first child tag of the <details> tag.

This allows screen readers to read the summary first, followed by the additional content, thereby improving clarity and accessibility. For this reason, omitting the <summary> tag is generally discouraged.

The role Attribute Is Not Allowed

The <details> tag does not support the role attribute. Its implicit ARIA role is group.

For more information about the role attribute, see the following article:

Browser compatibility

Browser Compatibility: <details> Tag, open Attribute, and <summary> Tag
Tags and Attributes
Desktop Chrome
Chrome
DesktopDesktop Edge
Edge
Desktop Firefox
Firefox
Safari
Safari
<summary> 12 79 49 9
<details> 12 79 49 9
open 12 79 49 9

Specifications

Specification Details for the <details> and <summary> Tags
Specification
<summary> HTML Standard
#the-summary-element
<details> HTML Standard
#the-details-element

References

See also