HTML - <details> Tag

Quiz

The HTML <details> tag is used to create a disclosure widget that contains information, which becomes visible when the widget is toggled open.

A summary (or label) should be provided using the HTML <summary> tag. A disclosure widget is represented onscreen by a small black triangle that rotates to indicate its open or closed status, with labels next to the triangles. The content of the summary is used as a label for the disclosure widget.

Syntax

Following is the syntax of the HTML <details> tag −

<details>.....</details>

Attributes

The HTML <details> tag supports both Global and Event attributes. It also accepts a specific attribute, which is listed below.

Attribute	Values & Description
open	open Specifies that the disclosure widget should be open by default; otherwise, it is closed.

Example: Creating Details Element

The following examples will illustrate the usage of the <details> and tag how to use it to create detail elements on any website. The program below demonstrates the usage of the HTML <details> tags −

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML details tag</title>
</head>
<body>
   <!--create details tag-->
   <p>Click on the below label to open the details.</p>
   <details>
      <summary>Open</summary> 
         You clicked on label(i.e. summary).
   </details>
</body>
</html>

Example: Details Element with Open Attribute

Here, we use the open attribute within the 'details' element to ensure the content is visible when the webpage loads −

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML details tag</title>
</head>
<body>
   <!--create details tag-->
   <p>HTML 'details' element example.</p>
   <details open>
      <summary>Open</summary> 
         You have used the 'open' attribute, 
         so by default, it opened already.
   </details>
</body>
</html>

Example: Disclosure widget using details Tag

Let's look at the following example, where we create a disclosure widget, using the HTML <details> tag to add additional information that users can toggle open and close. We also use CSS for styling the <details> tag −

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML details tag</title>
   <style>
      details {
         border: 1px solid blue;
         border-radius: 10px;
         padding: 4px;
         color: green;
      }

      details[open] {
         padding: 1px;
      }

      details[open] summary {
         border-bottom: 1px solid black;
         margin-bottom: 5px;
         color: red;
      }
   </style>
</head>
<body>
   <!--create details tag-->
   <p>HTML 'details' element example.</p>
   <details>
      <summary>Open</summary>
         A disclosure widget is represented onscreen using a 
         small black triangle that rotates to indicate open 
         and closed status, with labels next to the triangles. 
         The content of the summary is used as a label for the 
         disclosure widget.
      </details>
</body>
</html>

Supported Browsers

Tag
footer	Yes 12.0	Yes 79.0	Yes 49.0	Yes 6.0	Yes 15.0

html_tags_reference.htm

Print Page