The
<summary>tag defines a visible heading for the<details>element.
It acts as a toggle button that the user can click to expand or collapse the content inside<details>.
The<summary>tag must be the first child of<details>to work correctly.
Syntax
<details>
<summary>Click to expand</summary>
<!-- Hidden content that appears when summary is clicked -->
</details>Attributes
| Attribute | Description |
|---|---|
| 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>Summary Tag Example</title>
</head>
<body>
<h1>Interactive FAQ</h1>
<details>
<summary>What is JavaScript?</summary>
<p>JavaScript is a programming language used to make web pages interactive.</p>
</details>
<details>
<summary>What is HTML?</summary>
<p>HTML (HyperText Markup Language) is used to structure content on the web.</p>
</details>
</body>
</html>Output
Browser Output
You will see a clickable heading for each <details> block.
Clicking the summary expands or collapses the hidden content.
Use our TryIt Editor to test multiple <summary> elements and interaction.
Browser Support
 Chrome |  Firefox |  Edge |  Safari |  Opera |  IE9+ |
|---|---|---|---|---|---|
| ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes | ❌Yes |
All major browsers support <summary> tag except of IE
Notes
<summary>must be inside<details>to function.- Provides a toggle mechanism without JavaScript.
- Can be styled using CSS for font, color, and icons.
- Improves usability and semantic meaning for collapsible content.
Conclusion
The <summary> tag is essential for creating interactive headings inside <details>.
It enhances user experience by making content collapsible while maintaining semantic HTML.
