Contents
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.

- Simplistic design (no unnecessary information)
- High-quality courses (even the free ones)
- Variety of features
- Nanodegree programs
- Suitable for enterprises
- Paid certificates of completion

- Professional service
- Flexible timetables
- A variety of features to choose from
- Professional certificates of completion
- University-level courses
- Multiple Online degree programs

- Great user experience
- Offers quality content
- Very transparent with their pricing
- Free certificates of completion
- Focused on data science skills
- Flexible learning timetable
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:
Warning: display: list-item does not work equally well in all browsers.
Browser support

Chrome

Edge

Firefox

IE

Opera

Safari
Mobile browser support

Chrome

Firefox

Opera

Safari
Latest Udacity Coupon Found:
75% OFF COURSES
Udacity Black Friday Offer
The best time to save on Udacity courses is now - follow this coupon to access a 75% Udacity Black Friday discount & enjoy learning at a very low cost!