HTML <data> Tag

The <data> tag is an HTML element that links a piece of visible content to a machine-readable version of the same value. The human-friendly text stays inside the element, while the precise, script-friendly form is stored in the value attribute.

This is useful when your scripts need data in a specific format that you don't want to show to the user. For example, imagine a product list. Each product has an internal ID, but you only want shoppers to see the product name. You put the ID in the value attribute and the readable name between the tags, so JavaScript can read the ID while the user reads the name:

<data value="1545325112">Coca-Cola 500ml</data>

Here 1545325112 is the machine-readable value (the product ID) and Coca-Cola 500ml is what the user sees.

When to use `<data>`

<data> is one of several ways to attach machine-readable data to content. Choosing the right one matters:

Use <data> when there is a visible piece of text that has a natural machine-readable counterpart — a product ID, an order number, a SKU, an enum value, a rating expressed as a number. The element is a true HTML element, so the relationship between text and value is part of the document semantics.
Use a data-* custom attribute (for example data-product-id="1545325112") when the value belongs to any element and you simply need a place for your own scripts to read it. data-* is more flexible because you can put it on any tag and use any attribute name, but it carries no standardized meaning.
Use microdata (itemprop) or JSON-LD when the goal is to expose structured data to search engines (schema.org). <data> does not, on its own, tell Google what the value means.

A common pattern is to combine <data> with microdata, using itemprop to name the property and value to carry the precise number:

<data itemprop="productID" value="1545325112">Coca-Cola 500ml</data>

`<data>` vs `<time>`

The <time> element is a specialized sibling of <data>. The semantic boundary is simple:

Use <time> only for dates, times, durations, and time zones (it has its own datetime attribute and a defined parsing format).
Use <data> for every other kind of machine-readable value — IDs, prices, quantities, codes, and so on.

So <time datetime="2026-06-17">June 17</time> is correct, but you would never wrap a product ID in <time>.

Reading the value with JavaScript

<data> is represented by the HTMLDataElement interface, whose value property reflects the value attribute. So you can read it directly:

<data id="drink" value="1545325112">Coca-Cola 500ml</data>

<script>
  const el = document.getElementById("drink");

  console.log(el.value);                  // "1545325112"  (HTMLDataElement.value)
  console.log(el.getAttribute("value"));  // "1545325112"  (raw attribute)
  console.log(el.textContent);            // "Coca-Cola 500ml"  (visible text)
</script>

Both el.value and el.getAttribute("value") return the machine-readable string; textContent gives you the human-readable label.

Accessibility

Assistive technologies such as screen readers announce the visible text content, not the value attribute. A screen-reader user hears "Coca-Cola 500ml", never "1545325112".

Because of this, the visible text must always be meaningful on its own. Never hide information that a user needs inside value and expect screen readers to surface it. Treat value strictly as data for scripts, and keep all human-facing meaning in the element's text.

Browser support and SEO

Every modern browser parses <data>, but there is no special visual or behavioral rendering — it displays exactly like a <span>. Its purpose is purely semantic.

For the same reason, <data> is not a substitute for structured data. Search engines do not interpret a bare value attribute as schema.org data. If you need rich results, use proper microdata (itemprop) or, more commonly today, JSON-LD.

Syntax

The <data> tag comes in pairs. The content is written between the opening (<data>) and closing (</data>) tags.

Example of the HTML `<data>` tag:

HTML <data> Tag

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Refrigerated drinks</p>
    <ul>
      <li>
        <data value="1545325112">Coca-Cola 500ml</data>
      </li>
      <li>
        <data value="1545325113">Coca-Cola 330ml</data>
      </li>
      <li>
        <data value="1545325114">Coca-Cola Light 330ml</data>
      </li>
    </ul>
  </body>
</html>

Try it Yourself »

Attributes

Attribute	Value	Description
value	machine-readable format	Sets the machine-readable version of the contents of the `<data>` tag.

The <data> tag also supports the Global Attributes and the Event Attributes.

Practice

What is the purpose of the HTML data element?

It links visible content to a machine-readable value stored in the value attribute.It loads data from an external file or API endpoint.It is the dedicated element for marking up dates and times.It changes how its text is displayed in the browser.

When to use <data>

<data> vs <time>