HTML & CSS reference

<data>

Links visible text to a machine-readable value — a product code, an exact number — for scripts and search engines.

Syntax

<data value="machine value">text</data>

Attributes

Parameter	Type	Description
value	text	Required. The machine-readable value.

Examples

Products with their article numbers, and a script that reads them:

<ul>
  <li><data value="SKU-1042">Blue mug</data></li>
  <li><data value="SKU-2077">Green teapot</data></li>
</ul>
<p id="out"></p>
 
<script>
  const codes = [...document.querySelectorAll("data")].map((d) => d.value);
  document.getElementById("out").textContent = "Codes: " + codes.join(", ");
</script>

Notes

For dates and times use <time datetime="…"> instead. Don't confuse it with the data-* attributes: <data> describes the content itself, while data-* attaches any extra values to any element. The browser shows <data> as ordinary text.

In the tutorial

Text formatting — Inline tags for text — strong and em, mark, del and ins, sub and sup, code, kbd and pre, abbr and q.

Thanks for reading!