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.

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

GET 25% OFF

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

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

-