HTML <details> Tag

Q: What is the HTML details tag used for?

The details element creates a disclosure widget — content that is hidden until the user opens it. It is commonly paired with summary for the clickable heading.

Q: Do I need JavaScript for details?

No. Browsers provide native expand and collapse behavior. Click or tap the summary to toggle the hidden content.

Q: What does the open attribute do?

The open boolean attribute makes the details widget expanded when the page loads. Without it, content starts hidden.

Q: What is the summary element?

summary provides the visible label for a details widget. It should be the first child inside details so users know what will be revealed.

Q: What does the name attribute do on details?

When multiple details elements share the same name value, opening one can close the others — useful for accordion-style groups.

Beginner

⏱️ 5 min read

📚 Updated: Jun 2026

🎯 4 Examples

Interactive

HTML details tag tutorial — collapsible disclosure widgets with summary

Overview

What You’ll Learn

By the end of this tutorial, you’ll build native collapsible sections with <details> and <summary>—no JavaScript required.

details Syntax

Wrap hidden content in <details> with <summary> as the label.

summary Element

Provide the clickable heading users see before expanding.

open Attribute

Start expanded on page load when content should be visible.

name Attribute

Group panels for exclusive accordion behavior.

FAQ Patterns

Stack multiple disclosure widgets for Q&A sections.

CSS Styling

Customize disclosure appearance with modern CSS.

Fundamentals

What Is the `<details>` Tag?

The details element (<details>) is a disclosure widget. It holds content that can be hidden or shown. The first <summary> child provides the clickable label; everything else inside is the revealed content.

💡

No JavaScript required

Browsers provide native expand and collapse behavior. Click or tap the summary to toggle the hidden content—keyboard support is built in.

Common uses include FAQ answers, optional product specs, tutorial hints, changelog entries, and any content that should stay out of the way until the user asks for it.

Foundation

📝 Syntax

Wrap hidden content in details and add a summary as the first child:

syntax.html

<details>
  <summary>Click to expand</summary>
  <p>Hidden content goes here.</p>
</details>

Syntax Rules

<summary> should be the first child inside details.
Without open, content starts hidden until the user toggles it.
Pair with name on multiple widgets for accordion-style exclusive panels.
Do not hide essential navigation or warnings—only supplementary content.

Cheat Sheet

⚡ Quick Reference

Feature	Syntax / Rule	Notes
open	`open`	Expanded on page load
name	`name="group"`	Accordion group behavior
Default state	`Closed`	Unless open is present
Pairs with	`<summary>`	Visible clickable label
JavaScript	`Not required`	Native toggle behavior
Use cases	`FAQ, specs`	Hints, optional info

Comparison

⚖️ `<details>` and `<summary>`

These elements work together to create a native disclosure widget:

Element	Role	Notes
`<details>`	Container	Holds the collapsible content
`<summary>`	Label	Clickable heading users see
Order	`summary first`	Best practice for accessibility
Without summary	`Fallback label`	Browser shows a default label

Reference

🧰 Attributes

The main tag-specific attributes are open and name:

open Boolean

When present, the widget starts expanded on page load.

<details open>

name Optional

Groups multiple details elements. Opening one may close others with the same name.

name="faq"

class Global

CSS hook for custom disclosure styling.

class="faq-item"

id Global

Unique identifier for linking or scripting.

id="shipping-info"

open keeps the panel expanded initially. name groups multiple details elements so opening one may close others with the same name.

Hands-On

Examples Gallery

Basic disclosures, open-by-default panels, FAQ sections, and accordion groups with copy-ready code and live previews.

Live Preview

Click the summary to toggle the hidden paragraph:

What is HTML?

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

Basic Disclosure

A simple collapsible block with summary.

basic-details.html

<details>
  <summary>Click to reveal more info</summary>
  <p>This hidden content appears when opened.</p>
</details>

Try It Yourself

📚 Common Use Cases

Use <details> for FAQ answers, optional product specs, tutorial hints, changelog entries, and any content that should stay out of the way until the user asks for it.

Open by Default

Add the open attribute to show content expanded on load.

open-details.html

<details open>
  <summary>Shipping information</summary>
  <p>Orders ship within 2 business days.</p>
</details>

Try It Yourself

FAQ Section

Stack multiple details blocks for questions and answers.

faq-sections.html

<details>
  <summary>How do I reset my password?</summary>
  <p>Go to Settings and follow the reset link sent to your email.</p>
</details>

<details>
  <summary>Can I cancel my subscription?</summary>
  <p>Yes. Open Billing and select Cancel Plan.</p>
</details>

Try It Yourself

Accordion with name

Share a name value so only one panel stays open at a time.

accordion-details.html

<details name="plan" open>
  <summary>Free plan</summary>
  <p>Basic lessons and community access.</p>
</details>

<details name="plan">
  <summary>Pro plan</summary>
  <p>All courses and certificates.</p>
</details>

Try It Yourself

Design

Styling <details> with CSS

Browsers provide default disclosure styling. Customize borders, markers, and open states for a polished look:

border Card-style panels

summary Custom label styling

::marker Hide default triangle

[open] Style expanded state

details-styles.css

/* Disclosure widget styling */
details {
  padding: 0.75rem 1rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

details summary {
  cursor: pointer;
  font-weight: 600;
  color: #1e40af;
}

details[open] summary {
  margin-bottom: 0.5rem;
}

Live styled disclosure

View shipping details

Orders ship within 2 business days via standard delivery.

A11y

♿ Accessibility

Native disclosure widgets include built-in keyboard support:

Always include summary — write a clear, descriptive label.
Put summary first — predictable structure for assistive tech.
Keyboard works out of the box — summary is focusable and activatable.
Do not hide critical content — only tuck away supplementary information.

🧠 How <details> Works

Author adds details + summary

summary is the label; other children are hidden content.

Markup

Browser renders closed state

Only the summary shows unless open is set.

Render

User toggles the widget

Click or keyboard activates summary to reveal content.

Interact

Cleaner, interactive pages

Optional content stays hidden until the user needs it—no script required.

Compatibility

Modern Browser Support

The <details> element is fully supported in all modern browsers. Internet Explorer does not support it.

✓ HTML5 · Disclosure Widget

Collapsible sections in every modern browser

Chrome, Firefox, Safari, Edge, and Opera all support native disclosure widgets. Provide a JavaScript fallback for legacy IE environments.

98% Modern browser support

Google Chrome All versions · Desktop & Mobile

Full support

Mozilla Firefox All versions · Desktop & Mobile

Full support

Apple Safari All versions · macOS & iOS

Full support

Microsoft Edge All versions · Chromium & Legacy

Full support

Internet Explorer Not supported · Use JS fallback

Not supported

Opera All modern versions

Full support

<details> tag 98% supported

Bottom line: Safe for all modern production environments. For legacy IE, provide a JavaScript accordion fallback or show content expanded by default.

Wrap Up

Conclusion

The <details> tag is a simple way to add collapsible sections without JavaScript. Pair it with summary, use open when content should start visible, and group panels with name for accordion behavior.

View Examples Gallery Try FAQ section

Pro Tips

💡 Best Practices

✅ Do

Include a clear summary label
Use for FAQs and optional details
Style with CSS for a polished look
Use name for exclusive accordions

❌ Don’t

Hide essential navigation or warnings
Assume IE support without a fallback
Nest too many levels of details
Rely on details for complex app UI alone

Summary

Key Takeaways

Knowledge Unlocked

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

Bookmark these before you ship — they’ll keep your disclosure widgets semantic and accessible.

Core concepts

🗃 01

Disclosure Widget

<details> creates a native collapsible section.

Foundation

📝 02

summary Label

The clickable heading users see before expanding.

Essential

📂 03

open Attribute

Starts the widget expanded on page load.

Syntax

🔗 04

name Attribute

Groups panels for exclusive accordion behavior.

Pattern

⚡ 05

No JavaScript

Browsers handle toggle behavior natively.

Behavior

⚠️ 06

IE Not Supported

Provide a fallback for legacy environments.

Compat

❓ Frequently Asked Questions

What is the HTML details tag used for?

It creates a disclosure widget—content hidden until the user opens it. Pair it with summary for the visible heading.

Do I need JavaScript for details?

No. Browsers toggle the content natively when users click or activate summary.

What does the open attribute do?

It makes the details widget expanded when the page loads. Without it, content starts hidden.

What is the summary element?

summary provides the clickable label. Place it as the first child inside details.

What does the name attribute do on details?

When multiple details elements share the same name, opening one can close the others—useful for accordion groups.

Build Collapsible Sections

Practice details, summary, and accordion patterns in the interactive HTML editor.

Try details examples →

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 del Tag HTML dfn Tag

HTML <details> Tag

What You’ll Learn

details Syntax

summary Element

open Attribute

name Attribute

FAQ Patterns

CSS Styling

What Is the <details> Tag?

📝 Syntax

Syntax Rules

⚡ Quick Reference

⚖️ <details> and <summary>

🧰 Attributes

Examples Gallery

Live Preview

Basic Disclosure

📚 Common Use Cases

Open by Default

FAQ Section

Accordion with name

Styling <details> with CSS

♿ Accessibility

🧠 How <details> Works

Author adds details + summary

Browser renders closed state

User toggles the widget

Cleaner, interactive pages

Modern Browser Support

Collapsible sections in every modern browser

Conclusion

💡 Best Practices

✅ Do

❌ Don’t

Key Takeaways

Six truths every developer should know about <details>

Disclosure Widget

summary Label

open Attribute

name Attribute

No JavaScript

IE Not Supported

❓ Frequently Asked Questions

🧩 Related HTML Topics

HTML <del> Tag

HTML <dfn> Tag

Style details with CSS

Try FAQ section

Build Collapsible Sections

About the author

What Is the `<details>` Tag?

⚖️ `<details>` and `<summary>`

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