❮ Previous Next ❯

HTML <details> tag

The <details> tag is used to define a disclosure widget for additional information that the user can either show or hide when click. A summary statement should be defined using <summary> tag within the <details> element.

Type: Block Element

Syntax of <details> tag

<details>
Hidden content
</details>
The <details> tag is new in HTML 5.

Supported Browsers

Tag Chrome Internet Explorer Firefox Safari Opera Mini
<details> 12.0 or higher No 49.0 or higher 6.0 or higher 15.0 or higher

Full code example

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<details>
  <summary>More info</summary>
  <p>
    Content here.
  </p>
</details>
</body>
</html>
Run The code »

Output on the browser

More info

Content here.

More style using CSS for open and close state

details[open] summary {
  color:green;
}

Supported Browsers

Tag Chrome Internet Explorer Firefox Safari Opera Mini
<details> 12.0 or higher No 49.0 or higher 6.0 or higher 15.0 or higher

Attributes of <details> tag

Attribute Value Note
open open It defines the details should be visible.
close close It defines the details should be hidden.
Default value

Note: Don’t use the close attribute because by default, all contents inside the <details> element (except <summary> element) are hidden.
<details> = <details close>

Usage of <details> tag

The <summary> tag is used to define the visible section of the <details> tag. This visible section can be clicked to show or hide the elements placed inside the <details> tag. Using the <details> tag is useful for displaying FAQs, copyright notice and other hidden information.

Why chose us?

Our website has dedicated a lot to teach you HTML tutorials from ultimate beginner to pro.

Copyright notice

All the contents are maintained under the Logic Tale Studio.
Copyright © 2026||All rights Reserved.

Default CSS property of <details> tag
details {
  display:block;
}
❮ Previous Next ❯