HTML <summary>

Not-Ethan's avatar
Not-Ethan's avatar
Not-Ethan
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.

  • Career path

    Front-End Engineer

    Front-end engineers work closely with designers to make websites beautiful, functional, and fast.
    • Includes 34 Courses
    • With Professional Certification
    • Beginner Friendly.
      115 hours
  • Free course

    Learn HTML

    Start at the beginning by learning HTML basics — an important foundation for building and editing web pages.
    • Beginner Friendly.
      7 hours

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>

Output of the summary tag example

All contributors

Contribute to Docs

Learn HTML on Codecademy

  • Career path

    Front-End Engineer

    Front-end engineers work closely with designers to make websites beautiful, functional, and fast.
    • Includes 34 Courses
    • With Professional Certification
    • Beginner Friendly.
      115 hours
  • Free course

    Learn HTML

    Start at the beginning by learning HTML basics — an important foundation for building and editing web pages.
    • Beginner Friendly.
      7 hours