Last Updated : 11 Jul, 2025
The HTML <summary> tag defines a summary for the <details> element. The <summary> tag is used along with the <details> element and provides a summary visible to the user. When the user clicks the summary, the content placed inside the <details> element becomes visible which was previously hidden.
The <summary> tag was added in HTML 5. The <summary> tag requires both starting and ending tags. The <summary> tag should be the first child element of the <details> element.
Note: The <summary> tag supports the Global Attribute and Event Attribute in HTML.
<summary> Content </summary>Default CSS
The following default values are mostly displayed by the current browsers:
summary {
display: block;
}
Example 1: The below example illustrates the <summary> element.
HTML
<!DOCTYPE html>
<html>
<body>
<details>
<!-- html summary tag is used here -->
<summary>GeeksforGeeks.</summary>
<p> It is a portal for geeks.</p>
</details>
</body>
</html>
Output:
Example 2: This is another example that illustrates the <summary> element.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Summary Example</title>
<style>
body {
text-align: center;
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<details>
<summary>
Click me to toggle content
</summary>
<p>
This is the hidden content
that can be toggled by clicking the summary.
</p>
</details>
</body>
</html>
Output:
Supported BrowsersRetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4