<summary>
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 previoussemester.</p><!-- This can also include any other content e.g., images and GIFs --></details></body></html>
Contribute to Docs
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve 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 CoursesWith Professional CertificationBeginner Friendly115 hours - Free course
Learn HTML
Start at the beginning by learning HTML basics — an important foundation for building and editing web pages.Beginner Friendly7 hours