htmlfreecodes.
Menu

Analytics choices

Analytics is optional. If allowed, Google measures public pages, navigation, recognized acquisition sources and engagement, including tool and playground use. The site excludes entered code, search terms and form contents from its Analytics events. You can withdraw here. This choice does not change advertising consent.

Read about Analytics and your information.

<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 and standards

Browser rendering and modern HTML conformance are different questions. Check the current element reference for the browsers and features your project needs; the older source version table is not a current compatibility guarantee.

Read the MDN element reference

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

Approved-page light CSS-variable defaults are supplied: --border-color. The snippet includes CSS inside its HTML.

<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

Unavailable or blocked: markup context “Matching lesson markup is not supplied; this fragment uses a generic HTML scaffold.”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

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

Related Tags