The
<details>tag is used to create a collapsible content block that the user can open or close.
It is often used for FAQs, additional information, or disclosure sections.
The<summary>tag is typically used inside<details>to define the visible heading that toggles the content.
Syntax
<details>
<summary>Title or heading</summary>
<!-- Hidden content that can be expanded -->
</details>Attributes
| Attribute | Description |
|---|---|
| open | Boolean attribute. If present, the details are expanded by default. |
| id | Assigns a unique identifier. |
| class | Specifies one or more class names. |
| style | Inline CSS styling. |
| title | Provides additional information about the element. |
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Details Tag Example</title>
</head>
<body>
<h1>Frequently Asked Questions</h1>
<details>
<summary>What is HTML?</summary>
<p>HTML (HyperText Markup Language) is the standard markup language for creating web pages.</p>
</details>
<details open>
<summary>What is CSS?</summary>
<p>CSS (Cascading Style Sheets) is used to style and layout HTML content.</p>
</details>
</body>
</html>Output
Browser Output
You will see a collapsible block with a heading defined by <summary>.
Clicking the summary toggles the visibility of the hidden content.
Use our TryIt Editor to see the expand/collapse effect live.
Browser Support
 Chrome |  Firefox |  Edge |  Safari |  Opera |  IE9+ |
|---|---|---|---|---|---|
| ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes | ❌Yes |
All major browser supports <details> tag except of IE
Notes
<details>provides interactive content without JavaScript.- Works well for FAQs, hints, or optional content.
- The
openattribute allows the block to be expanded by default. - Styling can be applied with CSS for better appearance.
Conclusion
The <details> tag is perfect for collapsible content sections.
It enhances user experience by hiding non-essential information until needed and is semantically meaningful.
