<summary> Summary
The clickable label of a details element, always on show.
<summary> labels a <details> box and has to be its first child. Clicking it, or pressing Enter or Space while it has focus, opens and closes the details.
Keep it short, like a question or a title. Links and buttons inside it clash with the toggle, so leave them out. Without a summary, the browser shows a default label such as Details.
The summary element definition (opens in a new tab) requires it to be the first child of details. See the details element.
Syntax
<details>
<summary>Visible label</summary>
<p>More content</p>
</details>When to use it
The text of a <summary> tells people what is inside: "Shipping and returns", "Show 12 more comments", "Order #4521, delivered 3 May". Most readers will only ever see it with the details closed. Make sure it works that way.
Summary belongs in one place, as the first child of a details element. Other show-and-hide controls, like a "Read more" that loads a new page or a switch that changes a setting, need a button or a link. Outside details, a summary is plain text with no behaviour.
If you know ARIA, you may be tempted to add role="button", aria-expanded or tabindex. Don't. The browser already exposes summary as a focusable button with the correct expanded state. A hand-written aria-expanded never updates when the user toggles the box, so before long it announces the wrong state. For the open look, the details[open] > summary selector does the job with no extra classes.
Live example
Edit the code and watch the preview.
<details>
<summary>Show the ingredients</summary>
<ul>
<li>Flour</li>
<li>Milk</li>
<li>Eggs</li>
</ul>
</details>More examples
Order history rows
Every summary shows an order's number, date and status. For most users that is enough, and they never open it. Anyone who wants the item list is one click away from it.
<details>
<summary>Order #4521, delivered 3 May</summary>
<ul>
<li>2 x Green tea</li>
<li>1 x Blue mug</li>
</ul>
</details>
<details>
<summary>Order #4588, on its way</summary>
<ul>
<li>1 x Teapot</li>
</ul>
</details>Styling the open state
details[open] > summary matches the label only while its box is open. No classes, no script. Toggle the box in the preview and watch the background color switch.
<style>
summary{cursor:pointer;padding:.4em;background:#f2f2f2}
details[open]>summary{background:#dbe8ff;font-weight:bold}
</style>
<details>
<summary>Opening hours</summary>
<p>Monday to Friday, 9:00 to 18:00.</p>
</details>Tip: summary goes first in details, and nothing interactive goes inside it.
Browser support
summary works in all current browsers alongside details and is in the HTML Living Standard. Most browsers let you style its marker through the ::marker pseudo-element. Older Safari versions want ::-webkit-details-marker, which is why many stylesheets carry both selectors, each in its own rule.
Accessibility
summary is exposed as a button with an expanded state. Its text should clearly label what is hidden. The button role and expanded state are explained in the W3C disclosure pattern (opens in a new tab).
Common mistakes
Wrong
<summary><button>More</button></summary>Right
<summary>More</summary>summary is the interactive control already. A nested button breaks keyboard behaviour.
Frequently asked questions
How do I change or remove the summary arrow?
That triangle is a list-item marker. summary{list-style:none} removes it, and older Safari also needs summary::-webkit-details-marker{display:none}. Add your own indicator, for example with summary::after, and rotate it based on details[open]. Whatever you use, it should still show clearly whether the box is open or closed.
Can I put a heading inside summary?
Yes. <summary> accepts phrasing content plus one heading element, so <summary><h3>Shipping</h3></summary> is valid. Some screen readers then announce it as a button only, without the heading, so test with your target users before relying on it for navigation.