<summary>

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

Contributors

Interested in helping build Docs? Read the Contribution Guide or share your thoughts in this feedback form.

Learn HTML on Codecademy