HTML5 <details> Tag

Last Updated : 29 Jan, 2024

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

R

RahulRanjan4

Improve

Previous Article

HTML <del> Tag

HTML5 <dialog> Tag

Similar Reads

Why <big> tag is not in HTML5 while <small> tag exists ?

The <big> tag was discontinued in HTML5 while <small> tag is still in handy because <small> tag is frequently used to represent small prints like footnotes, copyright notices, comments etc. Many alternatives for <big> tag are already available such as <h1>, <h2> and so on. In HTML5 instead of using <big>, y

Explain the difference between head Tag and header Tag in HTML5 ?

The <head> element is a container for metadata and is placed between the <html> and <body> tags. The <header> is for the main content section's introductory elements, like headings or logos and it mainly focuses on what appears at the top of the webpage. <head> ElementThe <head> element is part of the HTML docume

How to define a visible heading for details element in HTML5 ?

In this article, we will learn how to define a visible heading for the <details> element. This element is used to create a widget that reveals information when it is in the "open" state. The state can be toggled by clicking on the element. The contents that have to be revealed are enclosed within the <details> tag. Approach: The <sum

What is the use of open Attribute in <details> Tag ?

The "open" attribute in <details> Tags are used to specify whether the additional details within the details element should be initially visible or hidden when the page loads. This attribute is particularly useful for providing users with collapsible sections of content that can be expanded or collapsed as needed, improving the organization a

HTML5 MathML <menclose> Tag

The HTML5 MathML <menclose> tag tag is an inbuilt element in HTML5. It is used to renders the contents which is inside of anbenclosing notation specified by the notation attribute. Syntax: <menclose attribute="value "> child elements </menclose">Attributes: The tag accepts some attributes which are listed below: class| id| style:

HTML5 <article> Tag

The <article> tag is independent of the other content of the page (even though it can be related). In other words, The article element represents a component of a page that consists of self-contained composition in a document, page, or site. For Ex. in syndication. A potential source for Article Element is: A magazine/newspaper articleA blog

HTML5 date attribute in <input> Tag

The date attribute in the input tag creates a calendar to choose the date, which includes day, month, and year. Syntax: <input type = "date">Example 1: Use date attribute in input tag C/C++ Code <!DOCTYPE html> <html> <head> <title>Date Attribute</title> </head> <body> <form action="/"

HTML5 <ruby> Tag

The <ruby> tag in HTML is used to specify the ruby annotation which is a small text, attached with the main text to specify the meaning of the main text. This kind of annotation is used in Japanese publications.Syntax: <ruby attributes> Contents... </ruby> Note: <ruby> tag contains two other tags which are listed below: <

The <rt> tag in HTML is used to define the explanation of the ruby annotation which is a small text, attached with the main text. Such kind of annotation is used in Japanese publications. This tag is new in HTML5. Syntax: <rt> Explanation... </rt> Example 1: This example describes <rt> tag within <ruby> tag. C/C++ Code

The <rp> tag in HTML is used to provide parentheses around a ruby main text which defines the information. This tag is used when the browser does not support ruby annotations. Such kind of annotation is used in Japanese publications. It is an optional tag. This tag is used within the <ruby> tag. This tag is new in HTML5.Syntax: <rt

Article Tags :