<data> Machine-readable data
Ties visible content to a machine-readable value.
<data> pairs human-friendly content with a machine-readable value: a product code behind a product name, say, or a raw number behind a formatted price.
People read the text and scripts read the value. The value attribute is required. Dates and times have their own element, <time>.
The data element definition (opens in a new tab) pairs a machine-readable value with human-readable content. For dates and times, use the time element.
Syntax
<data value="machine-value">Visible text</data>When to use it
<data> pairs friendly text for people with an exact value for software: a product list where a script sorts by the raw price, a review summary showing "four stars" with the value 4, a size chart pairing "Large" with a stock code, or a league table holding exact points.
For dates, times and durations, use time. For a gauge-style value within a range, meter shows it visually. Custom data-* attributes also store values for scripts, but they add no meaning; data says that this text and this value describe the same thing.
On its own, data does not create search engine structured data. Combined with microdata, though, the value becomes the property value, so you can attach a schema.org sku (opens in a new tab) or rating number to visible text. Keep values in one consistent machine format, such as 9.5 rather than "9,50 EUR", so every tool reads them the same way.
Attributes
| Attribute | What it does |
|---|---|
value | The machine-readable value (required). |
Live example
Edit the code and watch the preview.
<ul>
<li><data value="39-021">Blue mug</data> - <data value="9.5">$9.50</data></li>
<li><data value="39-022">Red mug</data> - <data value="11">$11.00</data></li>
</ul>More examples
Ratings with numeric values
Reviewers see star ratings written in words, while each data element stores the number. A script or a sorting tool could use the values without parsing the text. The list itself reads naturally for people.
<h2>Reader ratings</h2>
<ul>
<li>Classic pancakes: <data value="5">five stars</data></li>
<li>Banana pancakes: <data value="4">four stars</data></li>
<li>Oat pancakes: <data value="3">three stars</data></li>
</ul>Value used by microdata
With microdata, a data element's value attribute becomes the property value. Here the visible text says "Blue mug", while the itemprop takes the machine-readable stock code from value. The name and description come from ordinary text.
<div itemscope itemtype="https://schema.org/Product">
<h2 itemprop="name">Blue mug</h2>
<p>Stock code: <data itemprop="sku" value="39-021">39-021 (blue)</data></p>
<p itemprop="description">A large mug for tea or coffee.</p>
</div>Tip: Dates go in time. Everything else can use data.
Browser support
data is part of the HTML Living Standard and is supported by all current browsers. Internet Explorer never supported it, but the text still shows there as an unknown inline element. The value DOM property came later; see the data element support table (opens in a new tab).
Accessibility
Screen readers read the visible text and never the value, so the content has to make sense by itself. The W3C note Understanding Info and Relationships (opens in a new tab) explains why the visible text must carry the meaning.
Common mistakes
Wrong
<data>42</data>Right
<data value="42">Forty-two</data>A data element needs its value attribute.
Frequently asked questions
What is the data tag in HTML?
An element that wraps human-readable content and keeps a machine-readable equivalent in its required value attribute, for example <data value="398">Mini Ketchup</data>. <data> lets scripts read element.value to sort or filter lists. Dates and times are better served by <time>, which is specialised for that job.
What is the difference between the data element and data attributes?
Scope. The <data> element pairs one visible piece of content with one value that belongs to the document's meaning. data-* attributes go on any element and hold private, custom information for your own scripts and styles. App state goes in data-*, and content values like product codes go in data. The global attributes page covers custom attributes.