`<summary> HTML Tag`

In HTML Tags

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more

Element of: Learn How Fonts And Web Typography Work In HTML: A Beginner's Guide
What does <summary> HTML Tag do?: The <summary> element is used as a child of <details> element to provide a summary of the contents of the <details> element. At this time, <summary> is not well supported across browsers.
Display: inline
Usage: textual

Code Example

<details>
  <summary>A Few of my Favorite Things</summary>
  <p>Raindrops on roses and whiskers on kittens</p>
  <p>Cream colored ponies and crisp apple strudels</p>
  <p>Wild geese that fly with the moon on their wings</p>
  <p>Coffee</p>
</details>

A Few of my Favorite Things

Raindrops on roses and whiskers on kittens

Cream colored ponies and crisp apple strudels

Wild geese that fly with the moon on their wings

Coffee

Summarizing the Details

The details element creates a simple widget with important disclosure information such as legal notices, links to privacy policies, copyright information, an so forth. The summary element provides a short description of the contents of the details element and is displayed when the details disclosure element is toggled closed. Not all browsers support the details and summary elements, so use this element with care. Browsers that don’t support the element typically just display the full content of the details element rather than hiding it behind the summary label.

Adam Wood

Adam is a technical writer who specializes in developer documentation and tutorials.