HTML5 <summary> Tag
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 > <!-- html summary tag is used here --> < summary >w3wiki.</ summary > < p > It is a portal for Beginner.</ 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 >w3wiki</ 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
Contact Us