HTML details Tag

In HTML, we can use the <details> tag to provide additional details or information about any heading, or text such as the author details for any book listed in eCommerce website, or answer for any FAQ(frequently asked question), or may be to create a stylish sidebar list with a title and hidden details.

When we use the <details> tag, the text provided inside the opening and closing <details> tag is hidden by default. On the webpage you will see > Details, and you can click on this right arrow to show the text provided in the <details> tag.

The default text visible is Details when we use a <details> tag. But we can provide a custom summary text using the <summary> tag(what is summary tag?) inside the <details> tag. The text we provide inside the <summary> tag will be visible initially, and we can click on the arrow to see more details.

The additional details provided by the <details> tag can be viewed or hide only on the user's action or it can be shown by default by adding the open attribute to the <details> tag.

HTML <details> Tag - Syntax and Usage

The <details> element requires the start(opening) tag and end(closing) tag.

Following is the syntax for using the details tag in your HTML code:

<details>
    detail text...
</details>

HTML <details> Tag Basic Example

Let's see a simple example where we will just use the <details> tag.

<details>
    <p>This text is hidden as details,</p> 
    <p>and you can click on the arrow button to see this.</p>
</details>

You can use any HTML tag inside the <details> tag. It can be paragraph <p> tag, text formatting tags, <img> tag to add image, etc.

Now let's see the <details> tag in action. Below we have a basic example showing how to use <details> tag with <summary> tag:

In the above example, we have used the <summary> tag to provide a custom summary for the detail block which is displayed to the user while the detail is hidden.

HTML <details> tag Attributes

This element does not have any specific attributes except one attribute which is open, although this element supports both Global attributes and Event attributes.

open attribute:

• If this attribute is added to the <details> tag without any value, or with any value, then by default the details text will be displayed on the webage.

• The default value of this attribute is false means details are not visible to the user.

Here's an example:

<details open>
    <summary>
        HTML &lt;details&gt; tag
    </summary>
    <p>Both DETAILS and SUMMARY elements are newly introduced in HTML5.</p>
    <p>
        Content of details element is not visible unless 
        open attribute of details being set, or user clicks 
        on the arrow control.
    </p>
</details>

Default CSS style for HTML <details> tag

details {
    display: block;
}

Browser Support for HTML <details> tag

Following browsers support this attribute:

• Google Chrome 12+
• Apple Safari 6+
• Opera 15+