HTML 5 <data> Tag

The HTML <data> tag is used for providing a machine-readable version of its own contents. This can be useful in cases where your data needs to be in a certain format because it may be processed by a script, but this might not be the format that you'd like your users to see.

For example, you might prefer to present numbers to your users written with letters (eg, One, Two, Three... etc), but you might also have a script that sorts the numbers in ascending or descending order. Such a script may require that the numbers are provided as numbers (eg, 1, 2, 3... etc) instead. The <data> tag enables you to overcome this by providing two numbers - one for the users (provided within the <data></data> tags) and one for the script (provided in the value attribute). This could look something like: <data value="1">One</data>

Using another example, you might like to display a list of products for your users to choose from. Each product has a unique product ID. Because the product ID is a lengthy number, it's not so user-friendly (i.e. users probably won't know what the product is simply by looking at its ID). Therefore, you place the product ID into the value attribute of the <data> element. You then display the product title to the user.

Note that if the value is date or time related, use the <time> tag instead.

Attributes

HTML tags can contain one or more attributes. Attributes are added to a tag to provide the browser with more information about how the tag should appear or behave. Attributes consist of a name and a value separated by an equals (=) sign, with the value surrounded by double quotes. Here's an example, style="color:black;".

There are 3 kinds of attributes that you can add to your HTML tags: Element-specific, global, and event handler content attributes.

The attributes that you can add to this tag are listed below.

Element-Specific Attributes

The following table shows the attributes that are specific to this tag/element.

Global Attributes

The following attributes are standard across all HTML 5 tags (although the tabindex attribute does not apply to dialog elements).

• accesskey
• autocapitalize
• class
• contenteditable
• data-*
• dir
• draggable
• hidden
• id
• inputmode
• is
• itemid
• itemprop
• itemref
• itemscope
• itemtype
• lang
• part
• slot
• spellcheck
• style
• tabindex
• title
• translate

For a full explanation of these attributes, see HTML 5 global attributes.

Event Handler Content Attributes

Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain "event" occurs. Each event handler content attribute deals with a different event.

• onabort
• onauxclick
• onblur
• oncancel
• oncanplay
• oncanplaythrough
• onchange
• onclick
• onclose
• oncontextmenu
• oncopy
• oncuechange
• oncut
• ondblclick
• ondrag
• ondragend
• ondragenter
• ondragexit
• ondragleave
• ondragover
• ondragstart
• ondrop
• ondurationchange
• onemptied
• onended
• onerror
• onfocus
• onformdata
• oninput
• oninvalid
• onkeydown
• onkeypress
• onkeyup
• onlanguagechange
• onload
• onloadeddata
• onloadedmetadata
• onloadstart
• onmousedown
• onmouseenter
• onmouseleave
• onmousemove
• onmouseout
• onmouseover
• onmouseup
• onpaste
• onpause
• onplay
• onplaying
• onprogress
• onratechange
• onreset
• onresize
• onscroll
• onsecuritypolicyviolation
• onseeked
• onseeking
• onselect
• onslotchange
• onstalled
• onsubmit
• onsuspend
• ontimeupdate
• ontoggle
• onvolumechange
• onwaiting
• onwheel

For a full list of event handlers, see HTML 5 event handler content attributes.