How do I use details and summary for optional page information?
Quick answer
Use <summary> as a short label that tells readers what optional information is inside; put the information itself in the rest of its parent <details> element. The summary must be the first child of <details>, and activating it toggles the disclosure open or closed. Write the label so its purpose is understandable on its own. Browser and assistive-technology behavior can vary in some cases. [S1]
The question, the details, the next step.
I have optional information on a page and want readers to be able to reveal it when they need it. What should the summary say, and what goes inside details?
Treat the summary as the label for the optional information, not as a teaser that withholds its subject. Put a short name or clear description of the content in <summary>, then put the explanation, instructions, or other revealed material in the remainder of its parent <details>. The summary is the disclosure’s label, and activating it toggles the parent open or closed. It must be the first child of <details>. [S1]
For example, if the optional material explains what to bring to an appointment, label it “What to bring,” then put the relevant list after the summary:
<details>
<summary>What to bring</summary>
<p>Bring the documents listed in your appointment confirmation.</p>
</details>Use that paragraph only if it accurately describes the page’s requirements. The label tells readers what opening the disclosure is for, while the paragraph supplies the information. [S1]
How much should I put in the summary? Is “More” enough?
“More” is vague about what the optional information is about when the label is encountered on its own. Prefer a brief subject such as “Delivery options,” “Refund conditions,” or “How to prepare.” The right wording depends on what the revealed content actually contains; do not use a label that promises something the section does not explain.
A useful test is to read the summary by itself and ask: Could someone tell what they will find if they open it? If not, add the subject. Keep the explanation itself in the content revealed by opening the disclosure rather than cramming the whole explanation into its label. For this task, a concise text label is often easiest to understand.
Can you show how to turn a vague draft into a clearer disclosure?
Suppose the draft is a vague “More” label followed by a paragraph explaining what readers should bring to an appointment. Assuming that is the real content, revise the label to “What to bring” and leave the practical list in the revealed section. The label now names the topic without repeating the full list.
A simple editing pass:
- Identify the one subject covered by the optional content.
- Name that subject in the summary, using wording readers will recognize.
- Put the explanation or list in the rest of
<details>. - Check that the label accurately describes the material after it is opened.
If the content covers several unrelated subjects, consider whether one broad label will still set a clear expectation. Do not label a section “Instructions” if it only contains background information. The purpose is to make the optional information identifiable before someone opens it.
What should I check before publishing, and are there limits to what this example tells me?
Check both the structure and the wording: <summary> belongs inside its parent <details> and must be its first child; the remaining content inside <details> is what the disclosure reveals. [S1] Then read the summary on its own, confirm it names the revealed information, and verify that the revealed text matches the label.
The example shows the basic relationship between the two elements; it does not establish that every browser or assistive technology will present the disclosure identically. Behavior can vary in some cases. [S1] If you have specific accessibility requirements, test the page in the environments relevant to your audience rather than treating this small example as a complete compatibility test.
A practical checklist
Put
<summary>as the first child of its parent<details>.Use a short summary that names the optional information’s subject.
Place the explanation or list in the rest of
<details>.Read the summary alone and check that its purpose is clear.
Confirm the revealed content matches what the summary promises.
A few more useful answers
Can the summary contain the full explanation?
Its main job is to label the disclosure. Keep detailed material in the remainder of <details> so the summary stays a useful, concise description. [S1]
Does the summary have to be the first thing inside details?
Yes. <summary> must be the first child of its parent <details> element. [S1]
Will every browser or assistive technology behave exactly the same way?
The source notes that behavior can vary in some cases. The basic element guidance does not establish identical behavior across browsers and assistive technologies. [S1]
Sources
References used for this guide.
- [S1] MDN: The HTML summary disclosure element developer.mozilla.org · Checked