HTML <summary> element

The <summary> element supplies the visible label for a <details> disclosure box. It is the part the reader sees first, and the part they normally click to open or close the extra information.

Place one <summary> as the first child of <details>. It supplies the label for that disclosure widget. The remaining contents of <details> become the material that is shown or hidden.

A good summary is short but not cryptic. It should tell the reader what they will get if they open the section. A label such as More information is sometimes acceptable, but a label such as Why this element is useful gives the reader a much clearer reason to open it.

The <summary> element is not just decorative text. In the browser's behaviour, it acts as the control for the disclosure box. That is why it should not be treated like an ordinary paragraph heading that happens to sit inside <details>.

A summary can contain phrasing content, such as text with inline emphasis, or heading content. Keep its label concise so the purpose of opening the disclosure is clear. Put the longer explanation after the summary, inside <details>.

The browser supplies the disclosure interaction without JavaScript. A reader can focus the summary with the keyboard and usually toggle it with Enter or Space, as well as clicking it. Preserve a visible focus indicator when styling the control. The example starts closed, and its label remains useful in either state.

Attributes: GLOBALS.

Typical layout:
<details>
  <summary>How this disclosure works</summary>
  <p>Activate the summary again to close this explanation.</p>
</details>

Visual representation: