Details and Summary Elements

The HTML `<details>` and `<summary>` elements provide a native, semantic disclosure widget for showing and hiding supplementary content. They are preferable to rebuilding equivalent disclosure behavior from generic elements when their built-in interaction matches the requirement.

`<details>` represents a disclosure container whose contents can be expanded or collapsed. Its first `<summary>` child supplies the visible label that users activate to control the disclosure state.

The `open` attribute controls the initial expanded state. Because the interaction is provided by the browser, a basic disclosure does not require custom click handlers, state management, or manual show/hide logic.

The elements also communicate the structure and purpose of the control through semantic HTML. This gives browsers and assistive technologies a meaningful disclosure pattern rather than leaving them to infer behavior from generic containers and event handlers.

Use `<details>` for self-contained supplementary information such as FAQs, definitions, additional instructions, or optional details. If the required interaction has behavior that does not fit the native disclosure model, a different component pattern may be more appropriate.

Key points

• `<summary>` is the user-facing control for a `<details>` element.
• Adding `open` makes the disclosure initially expanded.
• The browser provides the basic expand/collapse interaction without custom JavaScript.
• Use the native elements when their disclosure semantics and behavior fit the UI requirement.
• Semantic HTML can reduce the amount of custom interaction code required.

Interview questions

Why is `<details>` often preferable to recreating a disclosure with `` and JavaScript?

The native element expresses the intended disclosure semantics directly in HTML. It also provides the basic expand/collapse interaction without requiring custom event handling and state synchronization. This can make a simple disclosure implementation smaller and easier to maintain.

What does the `open` attribute do on `<details>`?

`open` indicates that the details content is currently shown. When present in the markup, it makes the element initially expanded. Removing it makes the element initially collapsed.

What are `<details>` and `<summary>` used for?

`<details>` creates a native disclosure section that can be expanded or collapsed. `<summary>` provides the visible label or control for that section. The browser handles the basic interaction, so simple disclosure behavior does not need custom JavaScript.

How would you make a `<details>` element initially expanded?

Add the boolean `open` attribute to the `<details>` element. For example, `<details open>` starts in its expanded state. The user can still collapse it through the summary control.

What should you consider before replacing a native `<details>` disclosure with a custom component?

First determine whether the required interaction actually differs from the native disclosure model. A custom implementation introduces responsibility for interaction behavior, state, keyboard handling, and accessibility semantics. If native behavior satisfies the requirement, retaining the semantic HTML generally avoids unnecessary implementation complexity.