HTML <summary> tag

Updated: 11/13/2018 by Computer Hope
HTML summary tag

When writing in HTML, the <summary> tag is used to designate a heading for a <details> element. Upon clicking the heading, additional details are shown. It is useful when you would like to include extra information without taking up space. The following sections contain information about this tag, including an example of it in use, as well as related attributes and browser compatibility.

Example of <summary> code

<details>
<summary>Here is some information.</summary>
<p>Here are additional details about this information.</p>
</details>

Example result

Here is some information.

Here are additional details about this information.

Attributes

Within an HTML tag, an attribute dictates certain aspects of an HTML element. Attributes are made up of a name and value pair. While the <summary> tag does not have any unique attributes, it does utilize all of the standard attributes.

Compatibility

Edge Internet Explorer Firefox Safari Opera Chrome
Not supported Not supported 49.0+ 6.0+ 15.0+ 12.0+

Browser, Compatibility, Interactive, Web design terms, Widget