HTML Summary Tag <summary> is used to define heading for the HTML Details Tag <details>.
The heading can be clicked to view complete details and can be again clicked to hide the details.
HTML Summary Tag <summary> is a closed tag and needs a closing Summary HTML tag </summary>.
Note: Summary HTML tag is new in HTML 5.
Also, the HTML Summary Tag should be the first tag within the HTML details tag <details>.
Syntax of HTML Summary Tag
<summary> Some summery goes here… </summary>
Example of HTML Summary Tag
|HTML Summary Tag Code||Output|
</pre> <details> <summary>Copyright www.techhoney.com.</summary> - All the data on this website can be copyright protected by www.techhoney.com You are free to use the information from this website but we cannot be held responsible if you ever suffer loss due to data usage. </details> <pre>
– All the data on this website can be copyright protected by www.techhoney.com
You are free to use the information from this website but we cannot be held responsible if you ever suffer loss due to data usage.
In the above example of the HTML Summary tag we can see that in the output section we have an arrow sort of icon which can be clicked to view the complete details about the disclaimer of the website. We can click the arrow icon to show/hide the details.
Also, note that the HTML Summary tag is the first tag within the HTML Details Tag.
HTML Summary Tag supports all HTML Global Attributes and HTML Event Attributes.
HTML Summary Tag Supporting Browsers