LESSON 90 OF 120

Repair: disclosure details

Build a details disclosure with a clear summary and additional content.

Official sourceWHATWG HTML — detailsReviewed: 2026-08-26
STEP 1 · LEARN

How it works

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.