Using the HTML `<summary>` Element to Label `
` Widgets: Creating Interactive Collapsible Content

Learn how to use the HTML `<summary>` element to create a visible label for `

` widgets, building interactive collapsible content sections on your web pages. This tutorial explains the relationship between `<summary>` and `
`, demonstrates their usage, and shows how to customize their appearance using CSS.

Using the HTML `<summary>` Element to Label `
` Widgets

Understanding the `<summary>` Element

The HTML `<summary>` element is used to create a visible heading or label for an HTML `

` element. The `
` element creates an interactive widget that allows users to show or hide additional content. The `<summary>` element provides a clickable label that toggles the display of this content. The `<summary>` element is always the first element within the `
` element and is essential for creating this type of interactive widget.

Using the `<summary>` Element

To create an interactive widget with a visible label, place the label text within the `<summary>` tags, and place the content to be revealed or hidden within the `

` tags. For example:

Example: Basic `<summary>` and `
`

<details>
  <summary>Click me to see details</summary>
  <p>This text is hidden until you click the summary.</p>
</details>

Clicking the summary text ("Click me...") will toggle the visibility of the paragraph.

Browser Support for `<summary>`

The `<summary>` element is supported by major modern browsers. Check the W3Schools Browser Support page for a complete reference.

Browser Version
Chrome 12.0
Edge 79.0
Firefox 49.0
Opera 6.0
Safari 15.0

Styling `<summary>` with CSS

You can customize the appearance of the summary using CSS. For example:

Example: Styling `<summary>` with CSS

summary {
  font-weight: bold;
  cursor: pointer;
}

Most browsers render the `<summary>` element as a block-level element by default.