HTML Details and Summary Tags

The HTML <details> and <summary> tags let you place extra information behind a control that users can open or close. Together, they create a native disclosure widget. You can use one for frequently asked questions, optional instructions, product specifications, or supporting explanations.

The browser supplies the basic interaction and usually displays a marker beside the label. You do not need custom scripting to make the content expand and collapse. This makes the elements a useful HTML-first choice when the page needs genuine disclosure behavior.

How Details and Summary Work Together

The <details> element contains the complete widget. Its <summary> element provides the visible label that users activate. The remaining content supplies the information or controls revealed when the widget opens.

Place <summary> as the first element child of <details>. The first summary child becomes the working disclosure control. Give it a short, meaningful, non-empty label so users know what will appear before they open it.

Syntax:

<details>
  <!-- The summary is the visible disclosure label -->
  <summary>Descriptive label</summary>
  <!-- This content appears when the widget is open -->
  <p>Additional information goes here.</p>
</details>

When the widget is closed, the user normally sees only the summary. Activating that summary opens the details and exposes the rest of the content. Activating it again closes the widget.

Create a Basic Disclosure Widget

The following example gives visitors optional information about a community workshop. The summary states exactly what the hidden section contains, while the details content uses ordinary HTML paragraphs and a list.

Example:

<details>
  <!-- Keep the label clear and useful -->
  <summary>What should Asha bring to the pottery workshop?</summary>

  <!-- Any suitable flow content can follow the summary -->
  <p>Asha should bring the booking receipt and a water bottle.</p>
  <ul>
    <li>An apron</li>
    <li>A small hand towel</li>
    <li>A notebook</li>
  </ul>
</details>

This structure keeps optional content available without placing every detail in the main reading path. It also preserves the browser's built-in disclosure behavior.

Use the Open Attribute

A <details> element starts closed when it has no open attribute. Add open when the information should be visible as soon as the page loads.

Example:

<details open>
  <!-- This disclosure starts in the open state -->
  <summary>Today's registration status</summary>
  <p>Registration is open until 5:00 PM.</p>
</details>

The open attribute is Boolean. For a Boolean HTML attribute, presence means true and absence means false. The written value does not change that rule. Therefore, open="false" still opens the widget because the attribute remains present.

Note: To start with the content hidden, remove the open attribute completely. Do not write open="false".

Create a Native Exclusive HTML Accordion

Current HTML supports the name attribute on <details>. Details elements with the same non-empty name belong to an exclusive group. When a user opens one member, the browser closes the previously open member, so only one can remain open.

This feature creates a native HTML accordion without custom scripting. Use the same name for each related item, and choose a name that identifies the group. Keep the grouped elements together inside a containing element so their relationship remains clear in the document.

Example:

<section>
  <h2>Ravi's Course Questions</h2>

  <details name="course-questions" open>
    <!-- Only this grouped item starts open -->
    <summary>When does the course begin?</summary>
    <p>The course begins on Monday at 10:00 AM.</p>
  </details>

  <details name="course-questions">
    <!-- Opening this item closes the open group member -->
    <summary>Where is the classroom?</summary>
    <p>The classroom is on the second floor, beside the library.</p>
  </details>

  <details name="course-questions">
    <!-- Every item uses the same non-empty group name -->
    <summary>Which materials are included?</summary>
    <p>Printed notes and practice files are included.</p>
  </details>
</section>

If one panel should be visible initially, add open to that item only. Do not mark two members of the same group as open. The HTML standard requires no more than one initially open member in a details name group.

Tip: An exclusive accordion saves space, but it prevents users from comparing several open answers. Use separate, unnamed details elements when viewing multiple sections at once would be more helpful.

Content Rules

A <details> element accepts one <summary> followed by flow content. This means its revealed section can contain paragraphs, lists, images, headings, forms, and other suitable document content. Both the opening and closing tags are required.

The <summary> element belongs directly inside <details> and should come first. Its content may include normal phrasing content and, where appropriate, heading content. In practice, a concise text label is usually easiest to understand and activate.

• Use one working summary for each details element.
• Put the revealed content after the summary.
• Do not wrap the summary in a div or another container.
• Avoid placing links, buttons, or other competing controls inside the summary.
• Write labels that describe the hidden content, not vague text such as "More."

Accessibility and Keyboard Behavior

Native details and summary elements already expose disclosure behavior to the browser and assistive technology. Keep their built-in semantics. Do not add role="button" to the summary or manually copy the expanded state with ARIA when standard HTML already provides it. Unnecessary roles can interfere with how the control and its state are announced.

The summary needs a meaningful, non-empty accessible name. Visible text is the simplest way to provide one. An empty summary, a marker with no text, or a label made only of spaces does not tell users what the control reveals.

Keyboard users can move focus to the summary through normal sequential navigation, usually with Tab. When it has focus, they can activate it with Enter or Space where supported by the browser. The browser then toggles the associated content. You should test this behavior with the browsers and assistive technologies your audience uses.

Important: Do not remove or replace the visible summary label. A clear on-screen label helps keyboard, screen-reader, speech-input, and touch users understand the same control.

Common Mistakes

Most problems come from using the elements for the wrong interface or breaking their required relationship. Check for these mistakes before publishing:

• Placing the summary after other content instead of making it the first element child.
• Leaving the summary empty or using a label that does not explain the hidden content.
• Writing open="false" and expecting the details to start closed.
• Giving grouped details an empty name or different names by accident.
• Adding open to more than one member of the same named group.
• Scattering members of one named group across unrelated parts of the page.
• Adding custom ARIA roles that override or duplicate the native semantics.

Do not use <details> to represent tabs, application menus, or footnotes. Those interfaces have different meaning and interaction rules. Choose details only when a user is revealing or hiding additional information or controls.

Best Practices

1. Choose disclosure content that is useful but not required for understanding the main page.
2. Start the summary with words that clearly identify the answer, instructions, or options inside.
3. Use open only when showing the initial content benefits most users.
4. Use a shared non-empty name only when exclusive accordion behavior matches the task.
5. Keep each named group together and introduce it with a suitable heading when needed.
6. Test opening, closing, focus order, Enter, and Space in current target browsers.
7. Keep essential warnings and required instructions outside a closed disclosure.

A closed widget can make a page easier to scan, but it also makes its content less immediately visible. Do not hide information merely to shorten the page. Let the importance of the content decide whether it starts open, closed, or outside the widget.

Conclusion

The HTML details tag and HTML summary tag create a disclosure widget with native open-and-close behavior. Use a first-child, meaningful summary; treat open as a Boolean attribute; and apply a shared, non-empty name when you need an exclusive HTML accordion. With correct structure and clear labels, you can provide useful expandable content without JavaScript or CSS dependencies.