HTML5 <summary> Tag
Last Updated :
20 Dec, 2023
The HTML <summary> tag is used to define 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 summary is clicked by the user, 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.
Syntax
<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>
<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 Browsers
- Google Chrome 15
- Edge 12 and above
- Firefox 1 and above
- Opera 14 and above
- Safari 6 and above
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...