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

Permitted content Phrasing content or one element of Heading content
Tag omission None, both the start tag and the end tag are mandatory.
Permitted parents The <details> element.
Permitted ARIA roles button
DOM interface HTMLElement


This element only includes the global attributes.

Usage notes

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

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.


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

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


Specification Status Comment
WHATWG HTML Living Standard
The definition of '<summary>' in that specification.
Living Standard
The definition of '<summary>' in that specification.
Recommendation Initial definition

Browser compatibility

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

See also

© 2005–2017 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.