<data>

<data> associates visible content with a machine-readable translation supplied by its required value attribute. It accepts phrasing content and does not calculate, format, or publish that value automatically.

Read a product identifier

The label is human-readable; the value is the identifier an application can use. The tiny script exposes the value so you can inspect the distinction.

<p>Selected item: <data id="item" value="POT-042">Terracotta pot</data></p>
<output id="identifier"></output>
<script>
  document.querySelector('#identifier').textContent = 'Machine value: ' + document.querySelector('#item').value;
</script>

output {
  display: block;
  margin-top: 1rem;
}

Value and content

value may use an application’s own format. HTML does not define a schema for it. Keep the visible content and value in agreement when updating either. A datetime attribute is not the data element’s date mechanism; use time for dates and times.

For metadata attached to an arbitrary existing element, a real data-* attribute such as data-product-id may fit better. The data element is for the content-value pair itself.

Try a change

Change only POT-042 to another identifier. The product label stays the same while the displayed machine value changes. No accessibility announcement is guaranteed for the hidden attribute; visible content must remain meaningful on its own.

Sources and browser support

MDN: data describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.