<details> Tag

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

It is typically used to provide additional information or details. According to the specification, it represents a disclosure widget that allows users to access extra information or controls.

The <details> tag is commonly used to create interactive widgets, such as accordions, that users can expand or collapse.

HTML The <details> tag defines content that users can toggle open or closed. 
<details>
    <summary>Summary content</summary>
    Additional information or details.
</details>
How It Appears in Browsers Users can click the text labeled "Summary content" to reveal or hide the additional details.

Notes

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

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

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

Syntax

You can include any type of content inside the <details> tag, but using the <summary> tag indicates the title (summary content). If the <summary> tag is omitted, the user agent (such as a browser) provides its own default title (e.g., "Details").

HTML Example with the <summary> Tag 
<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:
HTML Example without the <summary> Tag 
<details>
    Additional information or details.
</details>
How It Appears in Browsers 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.

The open Attribute

The open attribute is a boolean attribute.
When this attribute is present, both the summary and the additional content are visible to the user. If the attribute is omitted, only the summary is shown.

By default, the widget is collapsed. When it is expanded, the content becomes visible. If desired, the open attribute can be used to keep the widget open by default.

HTML Using the open attribute to keep the widget open: 
<details open> <!-- The widget is open by default when the open attribute is present -->
    <summary>Summary content</summary>
    Additional information or details.
</details>
How It Appears in Browsers The widget is expanded by default when the open attribute is used.

When you observe how the <details> tag behaves in the browser, you can see that it was designed to implement accordion- or toggle-like interactions in HTML—similar to how developers used to rely on JavaScript for this behavior.

In the past, creating an accordion typically required a combination of JavaScript and CSS. But the <details> tag now provides native support for this pattern, making it much easier for web developers to implement expandable content without additional scripts.

Things to Keep in Mind

When using the <details> 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:

The <details>Tag Is Not Suitable for Footnotes

Footnotes are typically used to provide brief references or supplemental information within a document. They are intended to be concise and minimally intrusive.

The <details> tag, on the other hand, is meant for offering more substantial or expandable content, so its behavior and purpose differ from that of a footnote.

To learn how to properly mark up footnotes, refer to the following specification:

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
<details> 12 79 49 6
open 12 79 49 6
<summary> 12 79 49 6

Specifications

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

References

See also