<data> Tag in HTML – Value Attribute & Live Example

Quick facts

Category	Flow content, phrasing content, palpable content
Content model	Phrasing content
Tag omission	Neither the start nor the end tag can be omitted
Permitted parents	Any element that accepts phrasing content
DOM interface	`HTMLDataElement`

Syntax

<data value="SKU-1042">Blue running shoes</data>

Live example

Edit the code below and watch the preview update instantly.

index.html

Preview

Open in Full Editor →

Attributes

Attribute	Description
value	Required. The machine-readable value for the content, such as a product ID or a number.

Common examples

Product codes in a list

Shoppers read the product name; scripts and tools read the code in value.

<ul>
  <li><data value="SKU-4821">Blue running shoes</data></li>
  <li><data value="SKU-4822">Red running shoes</data></li>
</ul>

Sortable numbers in a table

Show a formatted price but keep a plain number for sorting.

<table>
  <tr><td>Laptop</td><td><data value="1299.99">$1,299.99</data></td></tr>
  <tr><td>Mouse</td><td><data value="24.5">$24.50</data></td></tr>
</table>

Reading the value with JavaScript

The value property gives you the machine-readable value as text.

<data id="score" value="87">Very good</data>

<script>
  const n = Number(document.getElementById("score").value);
  console.log(n + 1); // 88
</script>

Words that stand for numbers

Ratings or sizes written as words can still carry a number.

<p>Spice level: <data value="3">Hot</data></p>
<p>Size: <data value="42">Large</data></p>

<data> vs <span>

A <span> is a meaningless wrapper — fine for styling a few words. <data> says “this text stands for a specific machine-readable value” and stores that value in its value attribute.

Use data when a script, a sorting function or a search tool needs the exact value behind friendly text. Use span when you only need a hook for CSS or JavaScript and there’s no hidden value.

	<data>	<span>
Meaning	Text with a machine value	None
Key attribute	value	—
Best for	Codes, numbers, IDs	Styling hooks

Common mistakes to avoid

Leaving out value. The value attribute is required — without it the element has no purpose.
Using data for dates and times. Use <time> with a datetime attribute instead.
Formatting the value. Keep it raw: 1299.99, not $1,299.99.
Expecting it to look different. Data has no default style; it looks like normal text.

Accessibility & SEO tips

Screen readers read the visible text, not the value, so make sure the visible text makes sense on its own.
For rich search results such as product prices, use schema.org structured data — the data element alone isn’t used for that by Google.
Data is a good, honest way to make tables sortable without parsing currency symbols or commas in JavaScript.
Keep values consistent across the page, such as always using the same SKU format, so scripts can rely on them.
When the value is an identifier from your shop or database, keep the visible text human-friendly — a product name reads far better for visitors and screen readers than a raw code.

Browser support

Supported in all modern browsers, including Chrome, Edge, Firefox, Safari and their mobile versions. Older browsers simply show the text.

Related tags

Frequently asked questions

What is the difference between <data> and data-* attributes?

The <data> element pairs visible content with one machine-readable value. data-* attributes, like data-price="12", store any number of custom values on any element, and are only meant for your own scripts.

Is the value attribute required?

Yes. A <data> element without a value attribute is invalid HTML.

Should I use <data> for dates?

No. Use the <time> element for dates, times and durations; it has its own datetime attribute and formats.

Does <data> show the value on the page?

No. Only the text between the tags is shown. The value attribute is hidden and meant for scripts and tools.

Can I style <data> with CSS?

Yes, like any inline element. You can also select by value, for example data[value="3"] { color: red; }.

Does Google use the <data> element?

Not for rich results. Use schema.org structured data (JSON-LD) for things like prices and ratings.

Can <data> hold a value that is not a number?

Yes. The value can be any text, such as a product code like SKU-4821, an ISBN or an internal ID. It just has to be machine-readable.

Is <data> an inline or a block element?

Inline. It sits inside a line of text, list item or table cell, just like a <span>.

When should I use data-* attributes instead of <data>?

Use data-* attributes to attach extra information to any element for your own scripts. Use <data> when the text itself represents a value, so the pairing of text and value is part of the content.