Details & summary

Understand the idea

The details element lets a reader reveal supporting information. Its summary provides the label for the built-in control.

Place summary first inside details. The browser supplies opening, closing and keyboard interaction. Add the open attribute when the content should start expanded. Keep important instructions visible rather than hiding everything behind disclosures.

Read the example

This is an HTML fragment. Place it inside the body of a complete HTML document, unless the example explicitly identifies head content.

<details>
  <summary>Why does my image not load?</summary>
  <p>Check the filename, capitalisation and relative path.</p>
</details>

A small mistake, explained

How to fix it. Remove the open attribute entirely to start closed. JavaScript can set the element's open property to false if needed.

Try it yourself

Use Tab to focus the summary, then Enter or Space to toggle it. Add and remove the open attribute.

Further reading

HTML Living Standard — details

Original explanation and example prepared for HTML code FYI with AI assistance. Test the code in your own context. How these guides are made.

Keep exploring

• HTML · Guide
  Your first HTML document

  Give the browser a clear document, from the doctype to the closing tag.

• HTML · Guide
  Headings & paragraphs

  Build a readable outline instead of choosing tags by their default size.