HTML: summary

The <summary> element provides the visible, clickable heading that opens or closes a <details> element.

What you will learn

How summary works inside details
How to write a useful disclosure label
How to keep the control understandable for keyboard users

Minimal example

<details>
  <summary>Show return policy</summary>
  <p>Returns are accepted within 30 days.</p>
</details>

The summary text tells users what will be revealed. Browsers provide the disclosure interaction, including keyboard activation.

Write an action-oriented label

Use short text that describes the hidden content, such as “Show delivery details” or “Frequently asked questions”. Avoid vague labels like “More”.

Common mistakes

Place summary as the first child of details so it is recognized as the disclosure label.
Do not put essential information only in content that starts closed.
Use details and summary together instead of making a non-interactive heading act like a button.