Cyber Week

Save big!

All courses under $5 - for a limited time!

Code has been added to clipboard!

HTML summary Tag

Reading time 1 min
Published Jun 29, 2017
Updated Oct 11, 2019

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:

Example
<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:

Example
summary {
    display: list-item;
}

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

Browser support

Browser image
Chrome
12+
Browser image
Edge
-
Browser image
Firefox
49+
Browser image
IE
-
Browser image
Opera
15+
Browser image
Safari
6+

Mobile browser support

Browser image
Chrome
All
Browser image
Firefox
49+
Browser image
Opera
14+
Browser image
Safari
-