← Back to All Tags

<summary>

Defines a visible heading for a <details> element

✨ HTML5

Definition and Usage

The <summary> element establishes a visible heading for the <details> element. The heading can be clicked to view/hide the details.

The <summary> element should be the first child element of the <details> element.

Tip: The <summary> tag is always visible, while the rest of the content in <details> can be shown or hidden.
Note: The <summary> element creates a native disclosure widget that is keyboard accessible and screen reader friendly.

Browser Support

The <summary> tag is supported in all major browsers:

Chrome
Chrome
12.0+
Firefox
Firefox
49.0+
Safari
Safari
6.0+
Edge
Edge
79.0+
Opera
Opera
15.0+

Attributes

The <summary> tag supports the Global Attributes in HTML.

The <summary> tag also supports the Event Attributes in HTML.

Examples

Basic Details/Summary

Create a simple expandable disclosure widget:

Example

<details>
  <summary>Click to expand</summary>
  <p>This content is hidden by default and appears when you click the summary.</p>
</details>

FAQ Accordion

Build an accessible FAQ section using details and summary:

Example

<h2>Frequently Asked Questions</h2>

<details>
  <summary>What is HTML?</summary>
  <p>HTML (HyperText Markup Language) is the standard markup language for creating web pages.</p>
</details>

<details>
  <summary>What is CSS?</summary>
  <p>CSS (Cascading Style Sheets) is used to style and layout web pages.</p>
</details>

<details>
  <summary>What is JavaScript?</summary>
  <p>JavaScript is a programming language that enables interactive web pages.</p>
</details>

Nested Details

Create nested expandable sections:

Example

<details>
  <summary>Main Topic</summary>
  <p>This is the main content.</p>

  <details>
    <summary>Subtopic 1</summary>
    <p>Details about subtopic 1.</p>
  </details>

  <details>
    <summary>Subtopic 2</summary>
    <p>Details about subtopic 2.</p>
  </details>
</details>

Styled Summary

Add custom styling to the summary element:

Example

<style>
  details {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    margin: 12px 0;
  }

  summary {
    font-weight: 600;
    color: #745af2;
    cursor: pointer;
    padding: 8px;
    border-radius: 4px;
    transition: background-color 0.3s;
  }

  summary:hover {
    background-color: #f0f0f0;
  }

  details[open] summary {
    margin-bottom: 12px;
    border-bottom: 1px solid #ddd;
  }
</style>

<details>
  <summary>Styled Disclosure Widget</summary>
  <p>This is the content that appears when expanded.</p>
</details>

Summary with Icons

Add icons to enhance the summary appearance:

Example

<style>
  .icon-summary {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .icon-summary::before {
    content: "▶";
    transition: transform 0.3s;
  }

  details[open] .icon-summary::before {
    transform: rotate(90deg);
  }
</style>

<details>
  <summary class="icon-summary">
    <span>📚 Documentation</span>
  </summary>
  <p>Read the full documentation here...</p>
</details>

Accessible Disclosure Widget

Create an accessible expandable section with ARIA attributes:

Example

<details>
  <summary aria-label="Expand for more information about accessibility">
    Accessibility Features
  </summary>
  <div role="region" aria-label="Accessibility information">
    <ul>
      <li>Keyboard navigable (Enter/Space to toggle)</li>
      <li>Screen reader friendly</li>
      <li>Native HTML implementation</li>
      <li>No JavaScript required</li>
    </ul>
  </div>
</details>

How Details/Summary Works

  • The <summary> element must be the first child of <details>
  • Clicking the summary toggles the visibility of the details content
  • The browser adds a disclosure triangle (marker) automatically
  • Users can press Enter or Space to toggle when focused
  • The open attribute on <details> controls initial state
  • Screen readers announce the expanded/collapsed state

Accessibility Benefits

  • Native disclosure widget - no JavaScript required
  • Fully keyboard accessible (Tab, Enter, Space)
  • Screen readers automatically announce expanded/collapsed state
  • Semantic HTML improves document structure
  • Built-in focus management
  • Works without CSS or JavaScript
  • Better than custom accordion implementations
Accessibility Tip: Always use <summary> as the first child of <details>. If no summary is provided, browsers will display a default label like "Details."

Styling the Marker

You can customize or remove the disclosure triangle marker:

Example

<style>
  /* Standard way (Firefox, Safari, Chrome) */
  summary::marker {
    color: #745af2;
    font-size: 1.2em;
  }

  /* Webkit browsers (older Chrome, Safari) */
  summary::-webkit-details-marker {
    color: #745af2;
  }

  /* Remove the marker completely */
  summary {
    list-style: none;
  }

  summary::-webkit-details-marker {
    display: none;
  }

  summary::marker {
    content: "";
  }
</style>

Best Practices

  • Always use <summary> as the first child of <details>
  • Provide meaningful, descriptive text in the summary
  • Don't nest interactive elements (buttons, links) inside summary
  • Use CSS to style rather than adding extra markup
  • Test keyboard navigation (Tab, Enter, Space keys)
  • Ensure sufficient color contrast for accessibility
  • Consider using aria-label for additional context
  • Use for FAQs, progressive disclosure, and content organization

Try it Yourself

Interactive Example

Click the summaries below to expand/collapse content:

What is the summary tag?

The <summary> element establishes a visible heading for a <details> element. It provides an accessible way to create disclosure widgets.

Is it accessible?

Yes! The <summary> element is fully keyboard accessible and works with screen readers without any additional JavaScript.

This one is open by default

You can use the 'open' attribute on <details> to make it expanded by default.

Default CSS Settings

Most browsers will display the <summary> element with the following default values:

Default CSS

summary {
  display: list-item;
  cursor: pointer;
}

Related Tags