HTML <details> Tag


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.


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


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


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.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 30th March 2024