HTML <data> Tag

The <data> tag adds additional information to its content. This information is not visible to the user, but is readable by JavaScript and machine-readable devices.

HTML Tag

Example

#

Four <data> tags.
They hold machine-readable population numbers.

  1. New York
  2. Los Angeles
  3. Chicago
  4. Houston
<ol>
  <li><data value="8,601,186">New York</data></li>
  <li><data value="4,057,841">Los Angeles</data></li>
  <li><data value="2,679,044">Chicago</data></li>
  <li><data value="2,359,480">Houston</data></li>
</ol>

Using <data>

The <data> tag adds a machine-readable value to its content.

It associates human-readable value (the content) to a machine-readable value for data processors.

The <data> tag is useful for appending additional data to an HTML element.

If the value is time or date related, then use a <time> element instead.

Note:  Not all browsers support the <data> element.
Consider using a data-* attribute instead.

Attributes for <data>

This table lists the <data> tag attributes.

Attribute Value Description
value string value Any machine-readable value.
id    identifier Defines a unique identifier for the data element.

For addional global attributes see our global attributes list.


Did you know?

Did you know?

Using JSON or HTML as the <data> value

The value attribute accepts any string value.

JSON data is perfect for JavaScript to process.

HTML data is treated as text so you can assign HTML code without encoding.

A value attribute with an HTML string.

<data value="This is HTML code.<br />">Content item<data>

Browser support

Here is when <data> support started for each browser:

Chrome
62.0 Oct 2017
Firefox
22.0 Jun 2013
IE/Edge
13.0 Jan 2020
Opera
49.0 Nov 2017
Safari
-- Not supported

You may also like

Guides