Description

The HTML element <details> is used to define additional information which a user can open or close on demand.

It is commonly used to create an interactive widget that a user can open or close to see the additional content, which is displayed when it is opened.

It can contain any kind of content, which can include Block elements, Inline elements, and text.

NOTE: The element <summary> is used in conjunction with the <details> element to define visible content or a heading for the details.

The below table summarizes its usage.

Usage Details
Placement It is displayed as a Block element.
Contents It can contain Block elements, Inline elements, and text.
Tags Both opening and closing tags are required.
Versions HTML5

Syntax

Here is the basic syntax of the <details> element.

<details>...</details>

Examples

In the below example, the <details> element is used to show or hide the details, where content inside the <summary> element acts as a title for the hidden content.

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <h1>HTML Element - details</h1>
    <details>
        <summary>Content Summary</summary>
        <p>This content is hidden by default, but it can be shown or hidden by clicking on the above summary.</p>
    </details>
</body>
</html>

Attributes

The following table shows the list of supported and unsupported attributes for the <details> tag.

Attribute Type Details
Element-Specific Attributes The tag <details> has some element-specific attributes listed in the below table.
Global Attributes Like all other HTML tags, the tag <details> supports the HTML Global Attributes.
Event Attributes The tag <details> also supports the HTML Event Attributes.

Here is a list of attributes that are specific to the <details> element.

Attribute Value Description
open open Boolean attribute, which specifies whether the details will be visible to the user on page load.
The default value is false, so the details will be hidden by default.

Browser Compatibility

The tag <details> is supported in all modern browsers.

  • Google Chrome 12+
  • Internet Explorer or Edge 79+
  • Firefox 49+
  • Apple Safari 6+
  • Opera 15+

Related Links