HTML <details> Tag

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The HTML <details> tag is used to create a disclosure widget, which allows you to hide or reveal additional content within a web page. It consists of a summary, typically a clickable heading, and a hidden content section that is initially concealed but can be expanded or collapsed by clicking the summary. This tag is often used for FAQs, tutorials, or any content that benefits from a compact, collapsible format. When the user interacts with the summary, it toggles the visibility of the associated content, providing a user-friendly way to present supplementary information while keeping the page organized and concise.

Properties

Permitted Parents: Any element that accepts flow content
Content: Block, inline and text
Start/End Tags: Start tag: required, End tag: required

Example

HTML

<details>

<summary>About CSSPortal</summary>

<p>CSSPortal is a site dedicated to helping you with CSS.</p>

</details>

Result

Editor

Attributes

Attribute	Definition
open	Specifies whether the details should be open (visible to the user) or closed (hidden from the user).

Global Attributes

The <details> tag also supports the Global Attributes in HTML5

Event Attributes

The <details> tag also supports the Event Attributes in HTML5

Browser Support

The following table will show you the current browser support for the HTML <details> tag.

Desktop

79	12	49	15	6

Tablets / Mobile

18	49	14	6	1	4.4

Last updated by CSSPortal on: 30th March 2024

Support Us