HTML <summary> Tag
The HTML <summary> tag defines the clickable label for a <details> disclosure widget. Syntax, accessibility, styling and examples.
The <summary> tag defines the clickable caption — the visible label — for a <details> disclosure widget. Clicking the summary expands or collapses the rest of the <details> content, so the summary is the part that always stays on screen, whether the widget is open or closed.
The <summary> element must be the first child of a <details> element. If <details> has no <summary>, the browser supplies a default label (usually the word "Details"), which is rarely what you want — so almost every disclosure widget should include one.
This page covers the syntax of <summary>, how it behaves, its accessibility characteristics, the toggle event, and how to style it (including removing the disclosure triangle).
Syntax
The <summary> tag comes in pairs. The label text is written between the opening <summary> and closing </summary> tags, and it lives directly inside <details>.
Example of the HTML <summary> tag
HTML <summary> tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<details>
<summary>Copyright 2013-2014.</summary>
<p>W3docs. All rights reserved.</p>
<p>The content of the website is the property of W3Docs.com.</p>
</details>
</body>
</html>Rich content inside <summary>
A summary is not limited to plain text. It can contain inline content such as <strong>, <em>, <code>, or an icon, which is handy for emphasizing the label:
<details>
<summary><strong>Shipping & returns</strong> — read before ordering</summary>
<p>Orders ship within 2 business days. Returns accepted for 30 days.</p>
</details>Keep the summary short and meaningful: it is the label a user reads (and a screen reader announces) to decide whether to open the widget.
Accessibility
The <summary> element exposes an implicit ARIA button role to assistive technology, and it is focusable and keyboard operable by default:
- Tab moves focus to the summary.
- Enter or Space toggles the parent
<details>open or closed.
Because of this, you should not wrap a real <button> or a link inside the summary — the summary is already the control. Make sure the summary contains a clear, descriptive label so users who navigate by tabbing or by screen reader know what the widget reveals.
The toggle event and details.open
The open/closed state of a disclosure widget lives on the <details> element, not on the summary. The open boolean attribute reflects this state, and you can read or set it as details.open in JavaScript.
Whenever the state changes — by click, keyboard, or script — the browser fires a toggle event on the <details> element. Listening for it lets you react to the user opening or closing the widget (for example, lazy-loading content or sending analytics) instead of polling the state:
const details = document.querySelector('details');
details.addEventListener('toggle', () => {
console.log('Details is now', details.open ? 'open' : 'closed');
});How to style the <summary> tag
The default style for a <summary> uses the CSS display property with the list-item value, which is what draws the disclosure triangle (the marker) next to the label.
You can style the summary like any other element — change its color, add padding, or set a cursor:
summary {
color: blue;
cursor: pointer;
padding: 8px;
}Removing the disclosure triangle
To hide the default triangle reliably across browsers, remove the list marker and also clear the legacy WebKit/Blink marker:
summary {
list-style: none; /* Firefox and standards-based browsers */
}
summary::-webkit-details-marker {
display: none; /* Safari and older Chrome */
}Attributes
The <summary> tag has no required attributes of its own. It supports the Global Attributes and the Event Attributes.
Building an FAQ / accordion
Because each <details> works independently, you can place several on a page to build an FAQ or accordion. Each <summary> is the question, and the hidden content is the answer:
<details>
<summary>How do I track my order?</summary>
<p>Use the tracking link in your confirmation email.</p>
</details>
<details>
<summary>Can I change my shipping address?</summary>
<p>Yes, as long as the order has not yet shipped.</p>
</details>
<details>
<summary>Do you ship internationally?</summary>
<p>We ship to most countries. Rates are shown at checkout.</p>
</details>To allow only one section to be open at a time (a true accordion), give the <details> elements the same name attribute so the browser keeps them mutually exclusive.
The <summary> tag is one of the HTML5 elements. See also the <details> element it labels.