<summary>

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

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

Looking to contribute?

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
131 Lessons
Free course

Learn HTML

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