W3-Video WEB Tutorials

w3-video.com is a Free eLearning Website with over 500 video tutorials on HTML5, XAMPP, .htaccess, Firefox, Notepad++

HTML5 Tutorial

Home HTML5 XAMPP .htaccess Firefox Notepad++

details ... ⁄details

Share it

details intro details browser display details parents - children details syntaxdetails open attribute

HTML5 details element

The role of the details element is to hold details ⁄additional information about something. »video

The details element appears like a disclosure widget ⁄control which when expanded presents the details it contains and when collapsed hides them.

About details

Display & support details

Firefox iconChrome iconIE iconOpera iconSafari icon6

Parents, children details

Attributes details

Syntax details

1<details> ... </details> »video

Attributes and Values details (comma separated)

<detailsattribute="attribute_value(s)"> Video Examples
1. specific attributes
1.open="",  , open»video<details open> ... <⁄details>
All Specific Attributes
2. global attributes
1.accesskey=keyboard key»img<details accesskey="h"> ... </details>
2.class=class name»html »img<details class="class_name"> ... </details>
3.contenteditable="",  , true, false »html<details contenteditable="true"> ... </details>
4.contextmenu=menu id value»html<details contextmenu="menu_id_value"> ... </details>
5.data-*= value -<details data-http-error="404"> ... </details>
6.dir=ltr, rtl, auto»html<details dir="ltr"> ... </details>
7.draggable= true,  , false»img<details draggable="false"> ... </details>
8.dropzone= copy, move, link, string:, file: -<details dropzone="copy"> ... </details>
9.hidden= "",  , hidden»html »img<details hidden="hidden"> ... </details>
10.id=id name»html »img<details id="unique_id_name"> ... </details>
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<details lang="en"> ... </details>
17.spellcheck="",  , true, false»html<details spellcheck="true"> ... </details>
18.style=CSS property:value»html »img<details style="color:red"> ... </details>
19.tabindex= integer »img<details tabindex="3"> ... </details>
20.title=text»html »link»style »abbr»dfn
»img »meter
<details title="html page"> ... </details>
21.translate="", yes, no»html »img<details translate="yes"> ... </details>
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 details element

HTML5 details element: mark up details

min video details
00:00 video tutorial: details 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 details element, please see the specs: W3CWHATWG