Lesson 3 of 55 · HTML
HTML5 New Elements – Details & Summary
Duration: 7 min
Interactive Disclosure Widgets (<details> & <summary>)
The <details> element lets you create native collapsible sections without JavaScript.
<details>
<summary>What is HTML?</summary>
<p>HTML stands for HyperText Markup Language …</p>
</details>
How it works
- The
<summary>is always visible; clicking or pressing Enter/Space toggles the hidden content. - Browsers announce the open/closed state to screen readers automatically.
- Add the
openattribute (<details open>) to have the section expanded on page load.
Styling
details[open] summary::after {
content: '▲';
float: right;
}
summary::after {
content: '▼';
float: right;
}
Accessibility
<details>has an implicitrole='group'andaria-expandedstate.- No extra ARIA is required, but you can add
aria-labelto the<summary>for extra clarity.
Quick checklist for <details>
<summary>present and descriptive? ✅openattribute used only when needed? ✅- Content inside
<details>is semantically appropriate (<p>,<ul>, etc.)? ✅ - Styling does not hide the disclosure triangle for assistive technology? ✅
- Used for non‑critical content (FAQ, TOS) rather than essential information? ✅
Tip: Use
<details>for FAQs, terms of service, or any content that benefits from being optionally hidden. It works without any JavaScript.