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.


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

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


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

Output of the summary tag example

All contributors

Looking to contribute?

Learn HTML on Codecademy