The <summary> tag in HTML is used to specify a summary, caption, or heading for the <details> element. When combined, these two tags create a collapsible content widget that users can toggle open or closed.
📌 What Is the <summary> Tag?
- The
<summary>element provides a visible heading or summary for the<details>block. - It is clickable, and clicking it toggles the visibility of the
<details>content. - It must be the first child inside the
<details>element.
✅ Basic Syntax
<details>
<summary>More information</summary>
<p>This content is initially hidden but can be revealed by clicking the summary.</p>
</details>
🧪 Example 1: Simple Collapsible Section
<details>
<summary>FAQ: What is your return policy?</summary>
<p>We offer a 30-day return policy with a full refund for unused products.</p>
</details>
Clicking the summary text toggles the paragraph below it.
🧪 Example 2: Open by Default
<details open>
<summary>Details are open by default</summary>
<p>This content starts visible until the user collapses it.</p>
</details>
The open attribute makes the details expanded initially.
🎨 Styling <summary>
The summary text can be styled like any other element:
summary {
cursor: pointer;
font-weight: bold;
color: #2a7ae2;
}
⚠️ Best Practices
- Use
<summary>inside<details>only — it won’t work standalone. - Keep summary text clear and concise.
- Avoid putting block-level elements inside
<summary>; inline elements are preferred. - Test keyboard accessibility — users can toggle with the Enter or Space keys.
🔁 <summary> and <details> Benefits
| Feature | Description |
|---|---|
| User interaction | Click or keyboard toggles visibility |
| Content organization | Hides less important info by default |
| Accessibility | Screen readers recognize toggle roles |
🏁 Summary
The <summary> tag defines a clickable heading for the <details> element, creating an interactive, collapsible content block useful for FAQs, disclosures, or expandable sections.