The <summary> tag creates a title for the <details> element.
This title is rendered with an arrow before the text and is clickable.
A <summary> with a date and an order #.
Click the triangle to see the details.
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>
The <summary> tag creates a summary or title for the <details> element.
The content inside the <details> element displays when clicking the <summary> element.
The <summary> is rendered with a toggle arrow before the text.
Note: Not all browsers support the <details> tag.
A <summary> element with an open attribute.
This opens the <detail> element when the page is loaded.
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>
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.
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 |
