summary ... ⁄summary

Share it

summary intro summary optional element, occurrences summary browser display summary parents - children summary syntax

HTML5 summary element

The summary element allows you to specify the summary of the details of a details element. »video

About summary

is an optional element »examples
one summary element per details element; multiple summary elements allowed per HTML5 document (within multiple details elements) »examples

Display & support summary

display in browser »video
display type: block

₆

Parents, children summary

summary nested within elements »summary parents
elements nested within summary »summary children
»examples

Attributes summary

required: none
optional: global attributes, event attributes

Syntax summary

1	<summary> ... </summary> »video

Attributes and Values summary (comma separated)

<summary	attribute	=	"attribute_value(s)"	Video	Examples
1. specific attributes
	All Specific Attributes
2. global attributes
1.	accesskey	=	keyboard key	»img	<summary accesskey="h"> ... </summary>
2.	class	=	class name	»html »img	<summary class="class_name"> ... </summary>
3.	contenteditable	=	"", , true, false	»html	<summary contenteditable="true"> ... </summary>
4.	contextmenu	=	menu id value	»html	<summary contextmenu="menu_id_value"> ... </summary>
5.	data-*	=	value	-	<summary data-http-error="404"> ... </summary>
6.	dir	=	ltr, rtl, auto	»html	<summary dir="ltr"> ... </summary>
7.	draggable	=	true, , false	»img	<summary draggable="false"> ... </summary>
8.	dropzone	=	copy, move, link, string:, file:	-	<summary dropzone="copy"> ... </summary>
9.	hidden	=	"", , hidden	»html »img	<summary hidden="hidden"> ... </summary>
10.	id	=	id name	»html »img	<summary id="unique_id_name"> ... </summary>
11.	itemid	=	URL	-	-
12.	itemprop	=	string	»link »a	-
13.	itemref	=	string	-	-
14.	itemscope	=	"", , itemscope	-	-
15.	itemtype	=	absolute URL	-	-
16.	lang	=	language code	»html »head »title »img	<summary lang="en"> ... </summary>
17.	spellcheck	=	"", , true, false	»html	<summary spellcheck="true"> ... </summary>
18.	style	=	CSS property:value	»html »img	<summary style="color:red"> ... </summary>
19.	tabindex	=	integer	»img	<summary tabindex="3"> ... </summary>
20.	title	=	text	»html »link »style »abbr »dfn »img »meter	<summary title="html page"> ... </summary>
21.	translate	=	"", yes, no	»html »img	<summary translate="yes"> ... </summary>
	All Global Attributes
3. global event attributes
1.	onclick	=	script	» list	<element onclick="script" > ...
2.	ondblclick	=	script	» list	<element ondblclick="script" > ...
	All Event Attributes

Video demonstration summary element

HTML5 summary element Tutorial

min	video details
00:00	video tutorial: summary element
00:05	details element
00:05	details element allows you to provide additional information ⁄details about something
00:12	example: adding a few System properties - considered details of a PC System
00:18	the details (additional information) go after summary element, always
00:22	summary element
00:22	summary element allows you to provide the summary ⁄caption of the added details ⁄ additional information
00:32	"PC System properties" represents the caption for the details provided a little below
00:39	in browser: by default only the caption of the details displays, the control being collapsed
00:41	the control must be extended to see the details

For more information about the summary element, please see the specs: W3C ⁄ WHATWG