How to Use the summary Element

The HTML summary element labels a section that people can open and close. When someone activates it, extra content in the same details element is shown or hidden.

The answer first

Minimal example

<details>
  <summary>Shipping and returns</summary>
  <p>Shipping is free. Returns are accepted within seven days.</p>
</details>

The label stays visible while the section is closed. Activating it reveals the content written after it.

Tell people what will open

A clear label helps people choose the right section. “Shipping and returns” gives more information than repeating “Read more”.

• Use a short, specific label.
• Consider whether important instructions could be missed while the section is closed.
• Use a consistent style for labels on the same page.

Use the first summary in details

In normal markup, put summary first inside details, then write the content to reveal. A summary nested inside another element, or a second summary, does not act as the disclosure label.

<details>
  <summary>Payment methods</summary>
  <p>You can pay by card or bank transfer.</p>
</details>

Check keyboard use

Use Tab to move to the label, then check that Space or Enter opens and closes it in the browsers you support. Start with the browser's built-in behavior before changing how the control looks or works.

Common mistakes

• Expecting summary by itself to open content. The details element supplies the disclosure and its state.
• Using an empty label or a vague label such as “Click here”. Visible text may also provide the name that assistive technology uses.
• Hiding essential content in a disclosure, or using it to build tabs or menus. Use HTML that matches the purpose.

Check the specification and evidence in Atlas

See the summary Topic in Yugien Atlas for the conditions that make a summary the disclosure control, browser behavior, and its accessible name and role. For the disclosure state and groups, see the details Topic. A beginner-friendly overview is on How to Use the details Element.