HTML <summary> Tag

The <summary> tag creates a summary title for the <details> element. This title is rendered with a toggle arrow before the text and it is clickable.

HTML Tag

Example

#

A <summary> with a date and an order #.
Click the triangle to see the details.

Jan 15, 2021: Order 4A801

You sold 125 shares of MSFT at 11:29 AM

You bought 200 shares of GOOG at 11:26 AM

<details>
  <summary>Jan 15, 2021: Order 4A801</summary>
  <p>You sold 125 shares of MSFT at 11:29 AM</p>
  <p>You bought 200 shares of GOOG at 11:26 AM</p>
</details> 

Using <summary>

The <summary> tag creates a summary or title for the <details> element.

The content inside the <details> element will display when the user clicks on the <summary> element.

The <summary> is rendered with a toggle arrow before the text.

Note: Not all browsers support the <details> tag.

More Examples

A <summary> element with an open attribute.
This opens the <detail> element when the page is loaded.

Order 4A801

You sold 125 shares of MSFT at 11:29 AM

You bought 200 shares of GOOG at 11:26 AM

<details open>
  <summary>Order 4A801</summary>
  <p>You sold 125 shares of MSFT at 11:29 AM</p>
  <p>You bought 200 shares of GOOG at 11:26 AM</p>
</details> 

Attributes for <summary>

The <summary> element has no attributes, but it does accept global attributes.
The following are commonly used.

Attribute Value Description
id    value Provides the summary element with a unique identifier.
class    classnames Assigns one or more classnames to the summary element.
style    CSS-values Assigns CSS style values to the summary element.

For additional global attributes see our global attributes list.


Browser support

Here is when <summary> support started for each browser:

Chrome
12.0 Jun 2011
Firefox
48.0 Aug 2016
IE/Edge
-- Not supported
Opera
15.0 May 2013
Safari
6.0 Jul 2012

You may also like

Guides