<summary>

lcart753

Published Sep 9, 2021Updated May 27, 2022

Contribute to Docs

The <summary> semantic HTML element is used as a summary, label, or caption, for the <details> element.

Whether the <details> element is in an “open” or “closed” state, the <summary> text is always visible.

Syntax

The <summary> element can only be used as a first child element of the <details> element.

<details>
  <summary>Summary goes here</summary>
  <!-- Additional content goes here which will be toggled -->
</details>

Example

<!DOCTYPE html>
<html>
  <head> </head>
  <body>
    <details>
      <summary>Course Prerequisites</summary>
      <p>
        To enroll in ECON 102, you must've passed ECON 101 in a previous
        semester.
      </p>
      <!-- This can also include any other content e.g., images and GIFs -->
    </details>
  </body>
</html>