HTML summary Tag

HTML summary: Main Tips

• The HTML summary element defines a summary, caption or legend for given details.
• By using <summary> tags, you can hide the details and only display the summary. You can then click it to expand/collapse the details as required.
• The summary tag was introduced in HTML5. However, it is not supported well across all browsers.
• It supports all global attributes. There are no tag-specific ones.

Using the summary Tag

The HTML5 summary tags are used to surround the summary content for the <details> element:

<details> 
  <summary>Click to reveal fun facts!</summary> 
  <p>A banana is a berry, but a strawberry is not.</p>
  <p>The Amazon rainforest covers 40 percent of South America.</p> 
  <p>Elephants can’t jump.</p> 
</details>

HTML summary should be the first child of the <details> element. It describes a visible heading for the <details>.

Tip: when a table has a complex structure, many columns or rows of data, HTML summary tags can be useful by providing the gist of it.

Default HTML5 summary Styling

The default HTML summary styling includes display: list-item. This allows you to change the triangle icon to a different one or get rid of it completely:

summary {
    display: list-item;
}

Warning: display: list-item does not work equally well in all browsers.

Browser support

Chrome

12+

Edge

-

Firefox

49+

IE

-

Opera

15+

Safari

6+

Mobile browser support

Chrome

All

Firefox

49+

Opera

14+

Safari

-