HTML <details> Tag

😄 This post is based on the content from coding.courses.

Definition and Usage

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.

Basic Example

<details>
    <summary>Summary content</summary>
    Additional information or details.
</details>

Usage Notes

To use the <details> tag effectively, you need to understand the <summary> 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").

Example with the <summary> Tag

<details>
    <summary>Summary content</summary> <!-- The <summary> tag represents the title -->
    Additional information or details.
</details>

Example without the <summary> Tag

<details>
    Additional information or details.
</details>

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.

<details open> <!-- The widget is open by default when the open attribute is present -->
    <summary>Summary content</summary>
    Additional information or details.
</details>

References

HTML <details> Tag – The Details Disclosure Element - codingCourses

The details tag defines content that users can choose to open or close. It is commonly used to provide additional or detailed information. This article also covers the open attribute used with the details tag.

coding.courses