Open In App

HTML5 <details> Tag

Improve
Improve
Like Article
Like
Save
Share
Report

HTML <details> Tag is used for the content/information which is initially hidden but could be displayed if the user wishes to see it. This tag is used to create an interactive widget that the user can open or close.

It is used with the <summary> tag, which provides the title or header for the details section. It’s generally used for FAQs, dropdown menus, or to show/hide additional content.

Syntax

<details>
    <summary>  Text content  </summary>
    <div> Content... >
</details>

Attribute

Attribute Value

Description

details open

The detail tag has an attribute called open which is used to display the hidden information by default. 

Event

Events

Description

toggle event

It’s a feature allowing hiding or showing extra information by interaction with the summary in HTML details.

Supported Attributes

This tag is new in HTML5 and also supports the Global Attributes and Event Attributes in HTML.

Example: Implementation of details tag in HTML.

HTML




<!DOCTYPE html>
<html lang="en">
<html>
 
<body>
    <h1>GeeksforGeeks</h1>
   
    <!-- details tag starts here -->
    <details>
        <summary>
            GeeksforGeeks
        </summary>
        <p>
            A computer science portal for geeks
        </p>
        <div>
            It is a computer science portal
            where you can learn programming.
        </div>
       
        <!-- details tag ends here -->
    </details>
</body>
 
</html>


Output: 

wsd

 Example 2: Use of the open attribute with the details tag.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>HTML5 details Tag</title>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
 
    <!-- details open tag starts here -->
    <details open>
        <summary>GeeksforGeeks</summary>
        <p>A computer science portal for geeks</p>
        <div>
            It is a computer science portal
            where you can learn programming.
        </div>
 
        <!-- details open tag ends here -->
    </details>
</body>
 
</html>


Output: 
 

wsd

Supported Browsers 

  • Google Chrome 12
  • Edge 79
  • Firefox 49
  • Opera 15
  • Safari 6


Last Updated : 29 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads