<data>
Links human-readable content to a machine value, for example a product name with its code.
- Display
- inline
- Closing tag
- Required
- Permitted content
- Phrasing content
Example
#<p>Our courses:</p>
<ul>
<li><data value="HTML-101">HTML and CSS from scratch</data></li>
<li><data value="JS-201">JavaScript for beginners</data></li>
<li><data value="PY-101">Python from zero</data></li>
</ul>Definition and usage
#The <data> element links content visible to people with a value for programs, stored in the value attribute. The user sees "JavaScript course," and a script reads the identifier JS-201. The user sees "$1,299.00," and the script gets the number 1299.
A value like this is handy for sorting, filtering, and calculating: you don’t have to pick a number out of text full of spaces, commas, and currency symbols. In JavaScript you read it through the element’s value property.
Dates and times have their own separate element, <time>. If, on the other hand, the value is only needed by your scripts and isn’t tied to a specific piece of content, data-* attributes might be more convenient.
Syntax
#<data value="machine-value">content for people</data>Attributes
#text or number
The machine value, required. Write numbers with a period as the decimal separator and no spaces, regardless of how they look in the visible content.
The element also supports all global attributes, such as class, id, style and hidden.
Attributes in practice
#value
text or numberThe machine value, required. Write numbers with a period as the decimal separator and no spaces, regardless of how they look in the visible content.
<p>Course rating: <data value="4.5">★★★★½</data></p>More examples
#<ul id="cart">
<li>HTML and CSS course: <data value="149">$149.00</data></li>
<li>JavaScript course: <data value="199.5">$199.50</data></li>
</ul>
<p>Total: <strong id="total"></strong></p>
<script>
let sum = 0;
document.querySelectorAll('#cart data').forEach((item) => {
sum += Number(item.value);
});
document.getElementById('total').textContent = '$' + sum.toFixed(2);
</script>The script doesn’t need to parse the text "$199.50." It takes ready-made numbers from the value attribute and writes out the sum, $348.50.
Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Write dates and times in
<time>, not in<data>. - Keep one value format across the whole site, e.g. prices always in dollars with a decimal point.
- If the data is only needed by scripts, consider
data-*attributes instead.
Related entries
#- <time>A date, time, or duration written clearly for people and, at the same time, understandably for machines.
- <span>A generic inline container with no meaning, for styling a piece of text.
- <abbr>An abbreviation or acronym, with an optional expansion in the title attribute.
- <meter>A gauge for a value within a known range: disk space used, a test score, battery level.
Spotted a mistake or missing an example? Write to us.