HTML <data> Tag

The HTML <data> tag represents a machine-readable version of its own contents. This can be useful in cases where you need the contents provided in an alternative format.

For example, you might have a script that requires data in a certain format, however, this format is not very user friendly. Using the <data> tag, you can provide the value in two different formats; a machine readable format, and a user-friendly format (eg, 10 and Ten). You could also provide two different values, as long as they represent the same thing (for example, a book ID and a book title that both represent the same book).

If the value is date or time related, use the <time> tag instead.

Syntax

The <data> tag is written as <data value=""></data> with the user friendly contents inserted between the start and end tags. The value attribute provides the machine-readable value.

Like this:

Examples

Product ID

A typical usage scenario would be when displaying a list of products. Each product has a unique product ID. But the product ID is a lengthy number so it's not so user-friendly. Using the <data> tag, you can place the product ID into the value attribute, and place the product's title between the start and end tags.

Numbers

You can also use the <data> tag to represent numbers expressed in two different ways (eg, 2 and two).

Attributes

Attributes can be added to an HTML element to provide more information about how the element should appear or behave.

The <data> element accepts the following attributes.

Global Attributes

The following attributes are standard across all HTML elements. Therefore, you can use these attributes with the <data> tag , as well as with all other HTML tags.

• 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 Handlers

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

Most event handler content attributes can be used on all HTML elements, but some event handlers have specific rules around when they can be used and which elements they are applicable to.

For more detail, see HTML event handler content attributes.