Path // www.yourhtmlsource.com → Reference → <summary>

<summary>

The <summary> element specifies a visible heading for a <details> element. It serves as the clickable control that users interact with to show or hide the details content. When clicked, the summary toggles the open/closed state of the parent details element. This creates native, accessible disclosure widgets without requiring JavaScript.

Page Navigation:
Syntax | Attributes | Examples | When to Use | Related Elements

This page was last updated on 2025-11-17

Syntax

<details>
<summary>Click to expand</summary>
<p>Hidden content revealed when clicked...</p>
</details>

The element requires both opening and closing tags. It must be the first child of a <details> element. If no summary is provided, the browser will display a default label (typically "Details"). The summary element can contain phrasing content like text, inline elements, or headings.

Attributes

Global attributes - The <summary> element supports all global attributes such as id, class, style, lang, and dir.

The <summary> element has no element-specific attributes. By default, browsers render a disclosure triangle (marker) before the summary text, which can be styled or removed using CSS with the ::marker pseudo-element or list-style property.

Examples

FAQ Accordion Item

<details>
  <summary>What is your return policy?</summary>
  <p>We offer a 30-day money-back guarantee on all products.
  Items must be returned in original packaging.</p>
</details>

Technical Documentation

<details>
  <summary><strong>Advanced Configuration Options</strong></summary>
  <ul>
    <li>timeout: Set connection timeout (default: 30s)</li>
    <li>retries: Number of retry attempts (default: 3)</li>
    <li>debug: Enable verbose logging (default: false)</li>
  </ul>
</details>

Collapsible Section with Heading

<details open>
  <summary><h3>Chapter 1: Introduction</h3></summary>
  <p>Welcome to our comprehensive guide. This chapter covers
  the fundamental concepts you'll need...</p>
</details>

When to Use

Use the <summary> element when:

Creating expandable/collapsible content sections
Building FAQ pages with clickable questions
Hiding advanced options or secondary information
Making long pages more scannable
Creating accordion-style interfaces
Providing progressive disclosure of information

Benefits of using <summary> with <details>:

No JavaScript required for basic functionality
Built-in keyboard accessibility
Screen readers announce the expand/collapse state
Works even if CSS fails to load
Semantic and meaningful structure

Important notes:

Must be the first child of a <details> element
Only one summary per details element
Cannot contain interactive elements like buttons or links that break expected behavior