HTML Details and Summary
<details> creates a disclosure box that can open and close. <summary> is the visible label that the visitor clicks. This is useful for FAQs, extra explanations, and information that does not need to be visible immediately. The browser handles the basic open and close behavior. You do not need JavaScript just to make the disclosure work. The important rule is simple: <summary> belongs inside <details>, and the content that can be hidden goes after the summary.
Why this matters
- ·You can make simple accordions without JavaScript.
- ·The browser provides the open and close behavior.
- ·The structure is simple and semantic.
Common mistakes
- ·Do not hide information that every visitor must see.
- ·A summary should clearly describe what will open.
- ·Do not use details as a replacement for navigation.
Your codeHTML
Live preview
Frequently asked questions
No. The browser handles its basic open and close behavior.
Practice questions
Question 1
Build an FAQ item.
Your codeHTML
Live preview
Question 2
Build two independent FAQ items.
Your codeHTML
Live preview
Quick check
Just for this topic answer honestly, then check yourself.
1 / 3