Do I need JavaScript for summary and details?

No. Browsers provide native expand and collapse behavior when summary is paired with details.

HTML <summary> Tag

Q: What is the HTML summary tag used for?

The summary element provides the visible label for a details disclosure widget. Users click or tap summary to expand or collapse the hidden content.

Q: Does summary work without details?

summary must be used inside a details element as its first child. It does not function as a standalone toggle on its own.

Q: Does summary have specific attributes?

No tag-specific attributes. Use global attributes like class and id for styling and scripting hooks.

Q: Is the summary tag supported in all browsers?

Yes in all modern browsers. Legacy Internet Explorer has partial or no support for details and summary.

Beginner

⏱️ 5 min read

📚 Updated: Jun 2026

🎯 3 Examples

Interactive Content

HTML summary tag tutorial — clickable labels for details disclosure widgets

Overview

What You’ll Learn

The <summary> tag provides the clickable label for <details> disclosure widgets. This guide covers syntax, pairing with details, FAQ patterns, styling, and accessibility for beginners.

Disclosure Label

Visible heading for hidden content.

With details

Must live inside details.

No JavaScript

Native toggle behavior.

FAQ Sections

Question labels for answers.

Styling

class & global attributes.

Best Practices

Concise, descriptive labels.

Fundamentals

What Is the `<summary>` Tag?

The <summary> tag is an HTML element used with <details> to create an interactive disclosure widget. It serves as the heading or brief description for content hidden inside details, giving users a concise overview they can click to expand.

✅

First child of details

Place summary as the first element inside details. The browser renders it as the clickable toggle control for the hidden content that follows.

No JavaScript is required — browsers handle expand and collapse natively, making summary ideal for FAQs, optional content, and clean UI design.

Foundation

📝 Syntax

Embed summary inside opening and closing details tags:

syntax.html

<details>
  <summary>Your summary here</summary>
  <!-- Hidden content here -->
</details>

With Hidden Content

details-summary.html

<details>
  <summary>Show More</summary>
  <p>Your additional content goes here.</p>
</details>

Syntax Rules

summary must be the first child of details for correct behavior.
Self-closing syntax (<summary />) is not valid in HTML.
Write concise, descriptive label text so users know what will be revealed.
Only one summary per details element.

Cheat Sheet

⚡ Quick Reference

Topic	Code Snippet	Notes
Basic pair	`<details><summary>...</summary>`	Required parent
FAQ question	`<summary>How does it work?</summary>`	Question label
Styled label	`class="highlight"`	Global attr
Open by default	`<details open>`	On parent
vs details	`summary` = label	`details` = widget
Browser support	Modern browsers	IE limited

Comparison

⚖️ `<summary>` vs `<details>`

Element	Role	Notes
`<summary>`	Clickable label / heading	Always inside `details`
`<details>`	Disclosure container	Holds `summary` + hidden content
Attributes	`open`, `name` on `details`	`summary` uses global attrs only
JavaScript	Not required	Native browser toggle

Reference

🧰 Attributes

The <summary> tag has no tag-specific attributes. Use global attributes like class and id for styling and customization.

attributes.html

<details>
  <summary class="highlight">Your Styled Summary</summary>
  <p>Hidden content here.</p>
</details>

class / id Global

Hook for CSS styling the disclosure label.

class="highlight"

style Global

Inline color or font-weight for the summary label.

style="color: #dc2626"

title Optional

Advisory tooltip for extra context on the label.

title="Click to expand"

open (on details) Parent

Expand content by default using open on the parent details element.

<details open>

Try styled summary

Hands-On

Examples Gallery

Styled labels, expand/collapse toggles, and FAQ questions with copy-ready code and live previews.

👀 Live Preview

Click the summary to toggle hidden content:

What is HTML?

HTML structures content on the web using elements like headings, paragraphs, and links.

📚 Common Use Cases

Use <summary> to label expandable content in details widgets for FAQs, optional sections, and compact page layouts.

Styled Summary

Apply a class to customize the appearance of the summary label:

attributes.html

<details>
  <summary class="highlight">Your Styled Summary</summary>
  <p>This is the hidden content that appears when you click the summary.</p>
</details>

Try It Yourself

Expanding and Collapsing Content

The primary purpose of summary is to let users expand and collapse content within details:

expanding.html

<details>
  <summary>Show More</summary>
  <p>Your additional content goes here.</p>
</details>

Try It Yourself

FAQ Sections

The details and summary combination is often used for FAQ sections, letting users reveal answers to specific questions:

faq-sections.html

<details>
  <summary>How does it work?</summary>
  <p>Explanation of how it works...</p>
</details>

Try It Yourself

A11y

♿ Accessibility

Write descriptive labels — Summary text should clearly describe the hidden content.
Keyboard accessible — Users can focus and activate summary with keyboard (Enter/Space).
Meaningful pairing — Ensure the revealed content relates directly to the summary label.
Do not hide critical info — Essential content should not require discovery behind a collapsed panel.

🧠 How <summary> Works

Author adds summary inside details

The label is the first child of details.

Markup

Browser renders toggle control

Summary appears as a clickable disclosure triangle or marker.

User clicks to expand

Hidden content inside details is shown or hidden.

Interaction

Compact, interactive content

Users explore additional information at their own pace without JavaScript.

Compatibility

Browser Support

The <summary> tag is fully supported in all modern browsers. Legacy Internet Explorer has partial or no support.

✓ Baseline · HTML5

Native disclosure widgets

Modern browsers render <summary> with built-in expand/collapse behavior.

98% Modern browser support

Google Chrome Fully supported

Full support

Mozilla Firefox Fully supported

Full support

Apple Safari Fully supported

Full support

Microsoft Edge Fully supported

Full support

Internet Explorer Partial / no support

Partial support

Opera Fully supported

Full support

<summary> tag 98% — modern browsers

Bottom line: Use <summary> with <details> confidently in all modern browsers.

Wrap Up

Conclusion

Mastering the <summary> tag empowers you to create interactive, user-friendly disclosure widgets. Combined with <details>, it offers a seamless native experience for FAQs and expandable content without JavaScript.

View Examples Gallery Try FAQ example

Pro Tips

💡 Best Practices

✅ Do

Keep summary content concise and descriptive
Place summary as the first child of details
Ensure a meaningful relationship between label and hidden content
Test across browsers for consistent toggle behavior

❌ Don’t

Use summary outside of details
Hide essential information only behind collapsed panels
Write vague labels like “Click here” without context
Add multiple summary elements in one details

Summary

Key Takeaways

Knowledge Unlocked

Six truths every developer should know about `<summary>`

Bookmark these before you build disclosure widgets.

Core concepts

📋 01

Label

Toggle heading.

Purpose

📦 02

details

Required parent.

Pairing

⚡ 03

No JS

Native toggle.

Behavior

❓ 04

FAQs

Q&A labels.

Use case

🎨 05

class

Style labels.

Attributes

🌐 06

Modern

98% support.

Compatibility

❓ Frequently Asked Questions

What is the HTML summary tag used for?

It provides the visible, clickable label for a details disclosure widget. Users click summary to show or hide the content below.

Does summary work without details?

No. summary must be inside details as its first child to function correctly.

Do I need JavaScript for summary?

No. Browsers provide native expand and collapse when summary is paired with details.

Does summary have specific attributes?

No. Use global attributes like class, id, and style.

Is summary supported in all browsers?

Yes in all modern browsers. Internet Explorer has partial or no support for details and summary.

Build disclosure widgets

Practice <summary> with <details> for FAQs and toggle content in the Try It editor.

Try Show More example →

About the author

Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

Experience 12 years building web and cloud systems
Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

6 people found this page helpful

HTML sub Tag HTML sup Tag

HTML <summary> Tag

What You’ll Learn

Disclosure Label

With details

No JavaScript

FAQ Sections

Styling

Best Practices

What Is the <summary> Tag?

📝 Syntax

With Hidden Content

Syntax Rules

⚡ Quick Reference

⚖️ <summary> vs <details>

🧰 Attributes

Examples Gallery

👀 Live Preview

📚 Common Use Cases

Styled Summary

Expanding and Collapsing Content

FAQ Sections

♿ Accessibility

🧠 How <summary> Works

Author adds summary inside details

Browser renders toggle control

User clicks to expand

Compact, interactive content

Browser Support

Native disclosure widgets

Conclusion

💡 Best Practices

✅ Do

❌ Don’t

Key Takeaways

Six truths every developer should know about <summary>

Label

details

No JS

FAQs

class

Modern

❓ Frequently Asked Questions

🧩 Related HTML Topics

HTML sub Tag

HTML sup Tag

HTML details Tag

Try FAQ Example

Build disclosure widgets

About the author

What Is the `<summary>` Tag?

⚖️ `<summary>` vs `<details>`

Six truths every developer should know about `<summary>`