HTML <summary> tag

When writing in HTML (hypertext markup language), the <summary> tag designates a heading for a <details> element. Upon clicking the heading, additional details are shown. It is useful when you want to include extra information without taking up space. The following sections contain information about this tag, including an example of it in use, and related attributes and browser compatibility.

Example of <summary> code

<details>
  <summary>Information summary example.</summary>
  <p>Here are additional details about this information.</p>
</details>

Example result

Attributes

All HTML tags support standard attributes that define the settings of an HTML element. Unlike other HTML tags, the <summary> tag has no unique attributes.

Compatibility

Browser, Compatibility, Container tag, Interactive, Web design terms, Widget