HTML <data> Element and the value Attribute
The HTML <data> element connects visible text with a machine-readable value through its value attribute. Use it when the machine value is useful to scripts or applications but is not itself the text you want users to read.
<data value="SKU-1042">Blue notebook</data>When to use <data> Top ↑
Common examples include product IDs, internal codes or normalized values that differ from the human-readable label.
<ul>
<li><data value="398">Mini Ketchup</data></li>
<li><data value="399">Jumbo Ketchup</data></li>
</ul>Use <time> for dates and times Top ↑
If the content represents a date, time or duration, use the <time> element instead.
Reading the value with JavaScript Top ↑
<data id="product" value="1042">Notebook</data>
<script>
const product = document.getElementById('product');
console.log(product.value);
</script>
What <data> does not do Top ↑
The element does not automatically create schema.org structured data, search rich results, calculations or special screen-reader announcements. It simply provides a semantic machine-readable translation of its content.
Subhendu Mohapatra
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.
