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...