AlgoInsight

Q&A

What is the summary element in HTML?

By AlgoInsight Team2026-06-07frontendweb-developmenthtmljavascript

Overview

<details> and <summary> are HTML's built-in disclosure widget: a collapsible section whose content is hidden until the user opens it. <summary> is the part that's always visible and acts as the toggle. This pairing gives you accordions, FAQs, and "read more" sections with zero JavaScript and built-in accessibility.

graph TD
    A["&lt;details&gt;"] --> B["&lt;summary&gt; visible label (the toggle)"]
    A --> C[Hidden content: shown when open]
    B -->|click| D[Browser toggles open/closed natively]
    style B fill:#1e1b4b,color:#fff

Basic Usage

<details>
  <summary>What is your return policy?</summary>
  <p>You can return any item within 30 days for a full refund.</p>
</details>

The <summary> text ("What is your return policy?") is always shown; clicking it reveals or hides the <p>. The browser adds a disclosure triangle and handles the toggle - no script needed.

Open by Default

Add the boolean open attribute to start expanded:

<details open>
  <summary>Already expanded</summary>
  <p>This content is visible on page load.</p>
</details>

Building an Accordion (FAQ)

<details>
  <summary>Question 1</summary>
  <p>Answer 1.</p>
</details>
<details>
  <summary>Question 2</summary>
  <p>Answer 2.</p>
</details>

To allow only one open at a time (exclusive accordion), give them the same name attribute (a modern addition):

<details name="faq"><summary>Q1</summary><p>A1</p></details>
<details name="faq"><summary>Q2</summary><p>A2</p></details>

Styling

You can style the summary and customize or remove the default marker:

summary {
  cursor: pointer;
  font-weight: bold;
}
summary::marker { color: #6366f1; }     /* style the triangle */
summary::-webkit-details-marker { display: none; }  /* hide it (WebKit) */
details[open] summary { color: #6366f1; } /* style when open */

Accessibility Benefits

Because it's a native element, <details>/<summary> is accessible out of the box: keyboard-focusable, toggled with Enter/Space, and announced correctly by screen readers with proper expanded/collapsed state. Hand-rolled JavaScript accordions must replicate all of this manually (ARIA attributes, focus, keyboard handling) - using the native element avoids those bugs.

Detecting Toggle in JavaScript

If you need to react to open/close:

document.querySelector("details").addEventListener("toggle", (e) => {
  console.log(e.target.open ? "opened" : "closed");
});

Rules and Notes

Why This Matters in Interviews

HTML/front-end interviews use this to check knowledge of semantic, native elements and accessibility. Strong points: <summary> is the toggle label and must be the first child of <details>; the pair gives a no-JS collapsible with built-in keyboard and screen-reader support; the open attribute and the name attribute for exclusive accordions; and that using native elements is preferable to JS accordions because accessibility comes for free. Mentioning the toggle event shows practical depth.

Common Pitfalls

References

More answers