Module 15: Modern Interactive HTML
details and summary
Create a native disclosure widget for content that can be expanded or collapsed.
The details element creates a disclosure widget. Its first summary child provides the visible label. The browser handles the open/closed state and supports keyboard interaction.
<details>
<summary>What does HTML do?</summary>
<p>HTML describes the structure and meaning of web content.</p>
</details>
Add the open attribute when the content should start expanded. The name attribute can be used on related disclosure elements to make them behave as an exclusive group in supporting browsers.
A disclosure is useful for supplementary explanations, a short FAQ answer, or optional details that do not need to be visible immediately. It is not a good hiding place for critical information that visitors must see to complete a task.
Do not use details just because a design has an accordion shape. Consider whether visitors need one answer at a time or whether several pieces of content should remain open. Test keyboard operation and make the summary text clear enough to explain what will expand. Use JavaScript only when the interaction needs behavior beyond what the built-in disclosure provides.