HTML · The document layer
How do details and summary work?
Short answer
details and summary create a native disclosure widget that expands and collapses without JavaScript. The summary is the always-visible trigger and should describe the hidden content.
The details element is a built-in accordion. The first summary child is the toggle; the rest of the content is revealed when the details element is open. Browsers handle the interaction and accessibility state.
<details>
<summary>What is semantic HTML?</summary>
<p>
It is markup that describes the meaning of content rather than only
its appearance.
</p>
</details>
<details open>
<summary>Shipping and returns</summary>
<p>Orders ship within two business days.</p>
</details>Details worth knowing
- Only the first summary child acts as the toggle
- The open attribute makes the details expanded by default
- The toggle event fires when the state changes
- Content inside closed details is hidden from the accessibility tree
- You can style the marker, but do not remove the affordance without a replacement
Do not use details as a replacement for a navigation menu or a modal. It is a disclosure widget, not a menu or dialog, and those patterns have different keyboard expectations.
Follow-ups you should expect
Interviewers use these to check whether the first answer was understanding or memorisation.
- 1Does details require JavaScript?
- 2What does the open attribute do?
- 3When does the toggle event fire?
- 4Can details replace a modal dialog?
Say it in the interview
details and summary give me a native disclosure widget. The summary is the visible toggle, and the rest of the content appears when the details element is open. Browsers handle the interaction and expose the expanded state, so it works without JavaScript. I use it for FAQs and supporting information, not for navigation menus or modals, because those patterns have different keyboard and focus expectations.
Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.
Related questions
Reading is step one
Now say it out loud.
Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live HTML mock interview and get scored feedback on depth, clarity and confidence.