data

The HTML <data> element connects human-readable content with a machine-readable value through its value attribute.

Basic syntax

<ul>
  <li><data value="sku-1042">Blue notebook</data></li>
  <li><data value="sku-1043">Red notebook</data></li>
</ul>

People see the text inside the element, while scripts and other machine processing can read the value attribute. The value is not automatically sent to a server or turned into JSON; your application still needs to read it.

Choose a more specific element when possible

time

Use it for dates, times, or durations. Its datetime attribute can represent a standard date or time value.

meter

Use it for a measurement within a known range, such as a score or storage level.

data

Use it for a general value that is associated with visible text but is not specifically a date or measurement.

<time datetime="2026-09-05">September 5, 2026</time>
<meter min="0" max="100" value="72">72%</meter>

data is not a custom attribute

For arbitrary application metadata on any element, use a data-* custom data attribute. The data element has a different purpose: it gives a visible piece of content a machine-readable value.

Common mistakes

• Expecting data to submit its value with a form automatically.
• Putting private or security-sensitive information in the HTML because it is “machine-readable.”
• Using a plain number with no visible context or meaningful label.
• Using data for a date when time would communicate the meaning better.

Related pages

• data-* attributes: attach custom metadata
• charset: declare the document encoding
• meter: show a value in a range
• HTML reference index