<summary>: The SUMMARY Element
Last updated: 2026-10-13
<summary>The SUMMARY Element
As the first child of details, it is the visible heading the user clicks to toggle the widget.
| Category | Semantic |
|---|---|
| Content Model | Only as first child of details |
| Allowed Parents | Any element that accepts flow content |
| Content Tag | Yes — requires closing </summary> tag |
| Status | Standard |
📝 Syntax
<summary>summary heading</summary>▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <summary> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： summary must be the first child inside details; without it the browser shows a generic label.
❓ FAQ
QCan summary be used outside details?
ANo —
<summary> only works as the first child of a <details>; standalone it is meaningless. It is the disclosure panel's title bar, and the expand/collapse behavior comes natively from the browser with no JS required.QCan summary contain headings and icons?
AYes.
<summary> accepts heading and phrasing content, e.g. <summary><h3>Clause 1</h3></summary>, and can hold a <span> icon. Note that it replaces the browser's default triangle indicator, so supply your own arrow.QHow do I remove the default triangle on summary?
AWith CSS:
summary { list-style: none; }, plus summary::-webkit-details-marker { display: none; } for WebKit. Then draw your own indicator with ::before/::after and flip it using details[open].🏷️ Related Tags
💡 Related Cases
More case studies coming soon — check back later.
📚 Related Tutorials
