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++

data ... ⁄data

Share it

data intro data parents - children data vs time data syntaxdata value attribute

HTML5 data element

The data element allows you to mark up data in your HTML5 page. »video

Through its required value attribute, users must provide the machine-readable format of the data marked up with data element.

About data

Parents, children data

Attributes data


Don't use data element to mark up dates ⁄times, use time element for that. »video

Syntax data

1<data> ... </data> »video

Attributes and Values data (comma separated)

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

HTML5 data element: mark up data

min video details
00:00 video tutorial: data element
00:05 data element allows you to mark up data in your HTML5 document and provide the machine-readable format of that datathrough value attribute, as its value
00:14 five in our case can be marked up with data element
00:23 the machine-readable format of five is 5 and must be provided through the value of the value attribute

For more information about the data element, please see the specs: W3CWHATWG