HTML <summary> Tag – Clickable Title for Details
📌 Introduction
The <summary> tag defines the visible heading of a <details> element.
It is the part users click to expand or collapse hidden content.
👉 It only works inside <details>.
🧱 Syntax
<details>
<summary>Click to show more</summary>
Hidden content here
</details>
💡 Example
<!DOCTYPE html>
<html>
<head>
<title>Summary Example</title>
</head>
<body>
<h2>FAQ</h2>
<details>
<summary>What is HTML?</summary>
HTML is the structure of web pages.
</details>
<details>
<summary>What is CSS?</summary>
CSS is used for styling web pages.
</details>
</body>
</html>
🖥️ Output Explanation
- The
<summary>is visible first - Clicking it expands the hidden content
- Works like a built-in dropdown
🎯 Why <summary> is Important
1. 🧠 Controls <details>
Without <summary>, the details section has no clickable title.
2. 📱 Improves UX
Users can expand only what they need.
3. ⚡ No JavaScript Needed
Works natively in HTML.
🧩 How It Works
<summary>
→ click → show/hide
<details>content</details>
</summary>
🎨 Styling Example
<summary style="font-weight:bold; cursor:pointer;">More Info</summary>
⚖️ <summary> vs <details>
| Tag | Role |
|---|---|
<details> |
Container (hidden content) |
<summary> |
Clickable title |
🚫 Common Mistakes
- Using
<summary>outside<details>❌ - Forgetting
<summary>inside<details>❌ - Putting too much text in summary ❌
🧪 Mini Exercise
Create a page with:
- 3
<details>elements - Each has a
<summary>question - Add answers below
- Style the summary text to look clickable