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.


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:


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.


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


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

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

The <data> element accepts the following attributes.

Element-Specific Attributes

This table shows the attributes that are specific to the <data> tag/element.

valueProvides a machine-readable version of the element's contents. Required attribute.

Global Attributes

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

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.

Below are the standard HTML5 event handler content attributes.

Again, you can use any of these with the <data> element, as well as any other HTML5 element.

For a full explanation of these attributes, see HTML 5 event handler content attributes.

Differences Between HTML 4 & HTML 5

The <data> tag is new in HTML5.

For more detail, see HTML5 <data> Tag. Also check out the links to the official specifications below.


Here's a template for the <data> tag with all available attributes for the tag (based on HTML5). These are grouped into attribute types, each type separated by a space. In many cases, you will probably only need one or two (if any) attributes. Simply remove the attributes you don't need.

For more information on attributes for this tag, see HTML5 <data> Tag.

Tag Details

For more details about the <data> tag, see HTML5 <data> Tag.


Here are the official specifications for the <data> element.

What's the Difference?

W3C creates "snapshot" specifications that don't change once defined. So the HTML5 specification won't change once it becomes an official recommendation. WHATWG on the other hand, develops a "living standard" that is updated on a regular basis. In general, you will probably find that the HTML living standard will be more closely aligned to the current W3C draft than to the HTML5 specification.