HTML <data> Tag

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

This information is not visible to the users.

But it is readable by JavaScript and machine-readable devices.



Four <data> tags with invisible, but machine-readable, population numbers.

  1. New York
  2. Los Angeles
  3. Chicago
  4. Houston
  <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>

Using <data>

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

It associates human-readable 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:

62.0 Oct 2017
22.0 Jun 2013
13.0 Jan 2020
49.0 Nov 2017
-- Not supported

You may also like

Last updated on Sep 30, 2023