Summary HTML tag

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

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

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