References

Beginner-friendly references for web development, with live, editable examples.

The HTML <data> tag

Element All modern browsers Updated
Quick answer

The HTML <data> element links visible text with a machine-readable translation in its value attribute — for example a product name with its SKU. For dates and times specifically, use <time> instead.

Overview

The <data> element associates a piece of visible content with a machine-readable value in its value attribute. For example, <data value="398">Mini Gadget</data> shows the product name to people while exposing its numeric id to scripts and microformats.

It is the general-purpose counterpart to <time>: use <time> when the value is a date or time, and <data> for everything else — product codes, prices, ratings, or any value a machine needs that differs from the human-friendly text.

It is most useful when scripts or structured-data formats consume your content, letting you keep the display readable while the underlying value stays precise.

Syntax

<data value="21053">Mini Gadget</data>

Attributes

The <data> element supports the following attributes, in addition to the global attributes available to every HTML element.

Attribute Value Description
value A string or number, depending on the element and input type. Sets a control's value.

Example

Live example 
<p>In stock: <data value="42">forty-two</data> units.</p>

Best practices

  • Use <data> to attach a machine-readable value to human-readable content.
  • Use <time> instead when the value is specifically a date or time.
  • Keep the visible text friendly while the value stays precise (an id, code or number).
  • Reach for it when scripts or microformats need to read a value that differs from the display text.

Frequently asked questions

What is the data element for?
To link visible content to a machine-readable value via its value attribute — for example a product name shown to users and an id read by scripts.
What is the difference between data and time?
<time> is for dates and times; <data> is the general-purpose element for any other machine-readable value.
How do I expose a value to JavaScript with data?
Put it in the value attribute, e.g. <data value="398">Mini Gadget</data>, and read element.value in script.
Is the data element the same as a data-* attribute?
No. <data> is an element that pairs text with one value; data-* attributes store custom data on any element.
colgroup datalist