<summary>: The Disclosure Summary element - HTML

`Summaries as headings`

You can use heading elements in

, like this: html Overview Cash on hand: $500.00 Current invoice: $75.30 Due date: 5/6/19 Result This currently has some spacing issues that could be addressed using CSS. Warning: Because the element has a default role of button (which strips all roles from child elements), this example will not work for users of assistive technologies such as screen readers. The will have its role removed and thus will not be treated as a heading for these users.

`HTML in summaries`

This example adds some semantics to the

element to indicate the label as important: html Overview Cash on hand: $500.00 Current invoice: $75.30 Due date: 5/6/19 Result

`Changing the summary's icon`

The

element's marker, the disclosure triangle, can be customized with CSS. The marker can be targeted using the ::marker pseudo-element. which accepts the list-style shorthand property and its longhand component properties, such as list-style-type. This enables changing the triangle to an image (usually with list-style-image) or a string (including emojis). In this example, we replace the content of one disclosure widget and remove the icon from another by setting list-style: none before adding a custom disclosure icon via generated content. CSS In the first disclosure widget, we style the ::marker, changing the content based on the element's [open] attribute. For the second widget, we remove the marker with list-style properties, then add styled generated content with the ::after pseudo-element. We also include styles for ::-webkit-details-marker to target Safari. The selector for the browser-specific pseudo-element is included in an :is() pseudo-class so it doesn't invalidate the selector list. css details { font-size: 1rem; font-family: "Open Sans", Calibri, sans-serif; border: solid; padding: 2px 6px; margin-bottom: 1em; } details:first-of-type summary::marker, :is(::-webkit-details-marker) { content: "+ "; font-family: monospace; color: red; font-weight: bold; } details[open]:first-of-type summary::marker { content: "− "; } details:last-of-type summary { list-style: none; &::after { content: "+"; color: white; background-color: darkgreen; border-radius: 1em; font-weight: bold; padding: 0 5px; margin-inline-start: 5px; } [open] &::after { content: "−"; } } details:last-of-type summary::-webkit-details-marker { display: none; } The CSS includes the [open] attribute selector, matching only when the open attribute is present (when the are open). The :first-of-type and :last-of-type pseudo-classes target the first and sibling elements of the same type. We included the prefixed -webkit- pseudo-element within a :is() pseudo-class as it takes a forgiving selector list, so if the prefixed pseudo-element is invalid in a browser, the whole selector block will not be invalid. We also used CSS nesting. See the CSS selectors module. HTML html Quotes from Helen Keller On women's rights We have prayed, we have coaxed, we have begged, for the vote, with the hope that men, out of chivalry, would bestow equal rights upon women and take them into partnership in the affairs of the state. We hoped that their common sense would triumph over prejudices and stupidity. We thought their boasted sense of justice would overcome the errors that so often fetter the human spirit; but we have always gone away empty-handed. We shall beg no more. On optimism Optimism is the faith that leads to achievement; nothing can be done without hope. Result

`Technical summary`

Content categories	none
Permitted content	Phrasing content, optionally intermixed with Heading content
Tag omission	None; both the start tag and the end tag are mandatory.
Permitted parents	The element.
Implicit ARIA role	No corresponding role
Permitted ARIA roles	No `role` permitted
DOM interface	`HTMLElement`

`Specifications`

Specification
HTML # the-summary-element

`Browser compatibility`

See also Help improve MDN Was this page helpful to you? Learn how to contribute.This page was last modified on Jun 7, 2025 by MDN contributors. View this page on GitHub • Report a problem with this content