HTML - <summary>

The HTML summary element (<summary>) is used as a summary, caption, or legend for the content of a <details> element.

Example

In summation, get details from the link on the next line

Please see the <details> page for examples on <summary>.

Description

The HTML summary element (<summary>) is used as a summary, caption, or legend for the content of a <details> element.

Note: If the <summary> element is omitted, the heading "details" will be used.

Note: The default style for <summary> is display:list-item per HTML standard. If the style is being changed to display:block, the disclosure triangle will be dismissed, which is expected. See Bug 1283989 for more information.

Permitted content	Phrasing content or one element of Heading content
Tag omission	None, both the start tag and the end tag are mandatory.
Permitted parent element	The `<details>` element.
Normative document	HTML5, section 4.11.2

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	12	49.0 (49.0)^[1]	No support	No support	6

Feature	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	4.0	49.0 (49.0)^[1]	No support	No support	No support

[1] This feature is available since Firefox 47 behind the preference dom.details_element.enabled, defaulting to false, except on Nightly and Aurora versions (bug 1241750). Support for it is enabled by default, i.e. the preference is defaulting to true, since Firefox 49.0 (bug 1226455).

Specifications

Specification	Status	Comment
WHATWG HTML Living Standard The definition of '<summary>' in that specification.	Living Standard
HTML5.1 The definition of '<summary>' in that specification.	Working Draft	Initial definition

This element implements the HTMLElement interface.

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/html/element/summary

Element HTML HTML interactive elements Reference Web