<summary>

<summary> supplies the visible label for a details disclosure. Put it as the first child of details so it controls that widget.

A native disclosure

<details>
  <summary>What changes when I use border-box?</summary>
  <p>
    The declared width includes padding and borders. The content area uses the
    remaining space.
  </p>
</details>

/* Optional presentation */
summary {
  cursor: pointer;
}
details {
  padding: 1rem;
  border: 1px solid #64748b;
}

Tab to the summary and press Enter or Space. The content opens without a script. Activate it again to close it. A visible focus indicator should remain available.

State and attributes

open on details is a Boolean attribute: its presence opens the widget. open="false" still opens it. A script can set .open or listen for toggle when the state changes. Summary itself has no open attribute.

The optional name attribute can group disclosures so that only one in a group is open, where supported. Verify its compatibility separately from basic details support.

A practical use

Use a disclosure for supplementary explanations, such as a longer example rationale. Keep the essential answer visible in the surrounding page. Its summary should describe what someone will reveal, so they can decide whether to open it.

Common mistakes

Do not turn summary into a generic standalone heading or nest another interactive action inside its toggle label. Heading semantics inside summary can be exposed differently by browser and screen-reader combinations; a simple descriptive text label is easier to test.

Do not remove the disclosure indicator and focus outline without replacing their useful cues. In an unsupported browser, readable expanded content is a better fallback than CSS that hides it permanently. Continue with box-sizing for the concept explained in the example.

Sources and browser support

MDN: summary describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.