HTML <data> Tag

What You’ll Learn

By the end of this tutorial, you’ll link human-readable labels to machine-readable values with the <data> element.

What Is the <data> Tag?

The data element (<data>) links human-readable text to a machine-readable value using the value attribute. Readers see the element’s text; scripts read .value through the HTMLDataElement interface.

Common uses include temperatures, prices, product ratings, inventory counts, or any value where the displayed text differs from the machine-readable form scripts need.

📝 Syntax

Wrap visible text in <data> and set the machine-readable form in value:

<data value="42">forty-two</data>

Syntax Rules

• The value attribute is required and holds the machine-readable string.
• Text content is what users see on the rendered page.
• <data> is an inline phrasing element—it nests inside paragraphs and lists.
• Use <time datetime> for dates and times instead of generic data.

⚖️ <data> Element vs data-* Attributes

These share a name but serve different purposes in HTML:

Examples Gallery

Basic values, measurements, JavaScript updates, and data element vs data-* attributes with copy-ready code and live previews.

<p>
  The answer is
  <data value="42">forty-two</data>.
</p>

<p>
  The average temperature today is
  <data value="25">25°C</data>.
</p>

<data id="stock-price" value="150">$150</data>

<script>
  var stock = document.getElementById("stock-price");
  var price = Number(stock.value) + 10;
  stock.value = String(price);
  stock.textContent = "$" + price;
</script>

<!-- data ELEMENT -->
<data value="4.5">4.5 stars</data>

<!-- data-* ATTRIBUTE on a div -->
<div data-sku="BK-1024" data-price="19.99">Notebook</div>

♿ Accessibility

The value attribute is primarily for scripts, not screen readers:

• Make text content meaningful — users and assistive tech read the visible text.
• Do not hide important info in value only — put readable text inside the element.
• Use time for dates — when content is a date/time, time may be more semantic.
• Keep value accurate — scripts rely on it for calculations and sorting.

💡 Best Practices