<data>
The <data> element links a piece of content with a machine-readable translation. The element's content is the human-readable version, while the value attribute contains the machine-readable equivalent. This is useful for product IDs, SKU numbers, or any data where you need both a user-friendly display and a standardized code.
This page was last updated on 2025-11-17
Syntax
<data value="machine-readable-value">Human-readable content</data>
The element requires both opening and closing tags. The value attribute is required and should contain the machine-readable translation of the content. The visible text between the tags is what users see, while scripts and applications can access the standardized value.
Attributes
- value (required) - The machine-readable translation of the element's content. This should be a standardized format that computers can process consistently.
- Global attributes - The <data> element supports all global attributes such as
id,class,style,lang, anddir.
The value attribute can contain any string, but common uses include product codes, database IDs, standardized numeric values, or other machine-readable identifiers.
Examples
Product IDs
<p>Our best-selling product is
<data value="SKU-12345">Wireless Bluetooth Headphones</data>.</p>
Numeric Values with Formatting
<p>Population: <data value="7900000000">7.9 billion</data></p>
<p>Price: <data value="49.99">$49.99 USD</data></p>
<p>Distance: <data value="42195">42.195 km (marathon)</data></p>
Product Catalog
<ul class="product-list">
<li><data value="PROD-001">Classic Widget</data> - $19.99</li>
<li><data value="PROD-002">Premium Widget</data> - $29.99</li>
<li><data value="PROD-003">Deluxe Widget</data> - $49.99</li>
</ul>
When to Use
Use the <data> element when:
- Displaying product names while storing product IDs or SKUs
- Showing formatted numbers while preserving exact values
- Linking human-readable text to database identifiers
- Creating sortable tables with formatted display values
- Providing machine-readable data for JavaScript processing
- Supporting e-commerce applications that need both display and reference values
Difference from <time>:
- <time> is specifically for dates and times
- <data> is for any other type of machine-readable value
- Use <time> for temporal data, <data> for everything else
Benefits:
- Maintains separation between display and data
- Enables JavaScript to access standardized values easily
- Improves semantic meaning of the content
- Supports better data processing and integration
