HTML <summary> Tag

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The <summary> element is used to define a visible heading for the <details> element, which is a disclosure widget that allows users to show or hide additional content. The <summary> acts as the clickable label for the details section, providing a concise description of the content that can be expanded or collapsed.

When rendered in a browser, the <summary> is typically displayed as a bold or highlighted line with a small disclosure triangle or arrow next to it, indicating that it can be expanded to reveal more information. Clicking on the <summary> toggles the visibility of the content inside the parent <details> element.

A key feature of the <summary> element is that it enhances accessibility by providing a clear and semantic way for users to interact with expandable content. It can contain text, inline elements, and even small icons or images, allowing for flexible design. However, only the first <summary> element within a <details> block is recognized as the heading; additional <summary> tags are ignored.

The <summary> element does not function independently - it must always be a direct child of a <details> element. It is ideal for FAQs, collapsible sections, and any scenario where content can be optionally hidden to reduce clutter on the page.

Properties

Permitted Parents: The <details> element
Content: Inline and text
Start/End Tags: Start tag: required, End tag: required

Example

HTML

<details>

  <summary>About CSSPortal</summary>

  <p>CSSPortal is a site dedicated to helping you with CSS.</p>

</details>

Result

Editor

Attributes

None

Global Attributes

The <summary> tag also supports the Global Attributes in HTML5

Event Attributes

The <summary> tag also supports the Event Attributes in HTML5

Browser Support

The following information will show you the current browser support for the HTML <summary> tag. Hover over a browser icon to see the version that first introduced support for this HTML tag.