Build a details disclosure with a clear summary and additional content. Semantic structure should describe meaning, not visual appearance.
Correct example✓
<details><summary>How long does a website take?</summary><p>The duration depends on its structure, content and required functionality.</p></details>
details holds information that can be shown or hidden. Its first summary provides the visible label and disclosure control, while the paragraph contains the additional detail.
Common mistake!
<details><p>The duration depends on the project.</p></details>
The answer exists, but summary is missing, so the disclosure has no clear label for the user to open it.
STEP 2 · APPLY
Your exercise
Repair the example without changing its purpose. Build a details disclosure with a clear summary and additional content.
STEP 3 · BUILD
Write and see the result
index.htmlHTML
Safe resultisolated
The draft stays only in this browser.HTML and CSS allowed · scripts and network blocked
STEP 4 · CHECK
What needs to pass
0%not checked
○Details starts with a visible summary.
○Details contains additional text.
Explain the solution logic+
Inside details, add a summary containing the question first, then a paragraph containing the complete answer.
ANALYSIS REQUEST
Tell me briefly what you want to improve.
The initial discussion is without obligation. You receive an honest recommendation, suitable stages and the factors that affect price.
scheduleabout 2 minutestask_altno obligation
mark_email_readAfter sending, you receive an email confirmation and we continue through your chosen channel.
YOUR CONTROL
Cookie preferences
Necessary cookiesSave your preference and protect the form.
Anonymous analyticsHelps us understand which pages are useful, only after consent.