HTML Details and Summary Tag: What They Are and How to Use

The <details> tag in HTML creates a collapsible section that users can open or close. The <summary> tag defines the visible heading for this section that users click to toggle the content inside <details>.

How It Works

The <details> tag acts like a container that can hide or show extra information. Think of it like a folder you can open or close to see what's inside. The <summary> tag is like the folder's label that you click on to open or close it.

When the page loads, only the summary is visible. If you click the summary, the hidden content inside the details tag appears below it. Clicking again hides the content. This behavior is built into the browser, so you don't need extra code to make it work.

This makes it easy to add sections that users can expand if they want more details, keeping the page clean and simple at first glance.

Example

This example shows a question that you can click to reveal the answer inside the details section.

html

<details>
  <summary>What is the capital of France?</summary>
  <p>The capital of France is Paris.</p>
</details>

Output

What is the capital of France? (clickable summary)
[When clicked, shows:] The capital of France is Paris.

When to Use

Use <details> and <summary> when you want to hide extra information that users can choose to see. This is great for FAQs, instructions, or any content that might overwhelm the page if always visible.

For example, on a product page, you can hide technical specs inside a details section so the page looks clean but users can open it if interested. It improves user experience by reducing clutter and letting users control what they want to read.

Key Points

• <details> creates a collapsible container.
• <summary> is the clickable heading that toggles the container.
• Works natively in modern browsers without extra scripts.
• Improves page organization and user control over content visibility.
• Good for FAQs, instructions, and optional details.

Key Takeaways

The

tag creates a section that can be expanded or collapsed by the user.

The

tag defines the clickable heading that toggles the details content.

No extra JavaScript is needed; browsers handle the toggle automatically.

Use these tags to keep pages clean by hiding optional or extra information.

They are perfect for FAQs, instructions, and any content that benefits from being collapsible.