midHTML5
What is the purpose of the <details> and <summary> tags?
Updated Apr 28, 2026
Short answer
They create a native disclosure widget (accordion) without needing JavaScript.
Deep explanation
The <summary> acts as the clickable heading, and the content inside <details> is toggled visible/hidden when clicked. The 'open' attribute can be used to set the initial state.
Real-world example
Creating an FAQ section where answers are hidden until the question is clicked.
Common mistakes
- Trying to use complex CSS transitions for the opening animation (native support for animating the 'open' state is limited).
Follow-up questions
- Can you have multiple summaries?