<data>
The <data> element links human-readable content with a machine-readable value. It is useful when the visible label differs from the normalized value used by scripts or exports.
Overview
The <data> element links human-readable content with a machine-readable value. It is useful when the visible label differs from the normalized value used by scripts or exports.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 62 | 14 | 22 | 10 | 62 | 10 | |
| HTML attribute | ||||||
value | 62 | 14 | 22 | 10 | 62 | 10 |
| DOM API | ||||||
| The HTMLDataElement interface provides special properties (beyond the regular HTMLElement interface it also has available to it by inheritance) for manipulating data elements. | 62 | 14 | 22 | 10 | 62 | 10 |
| The value property of the HTMLDataElement interface returns a string reflecting the value HTML attribute. | 62 | 14 | 22 | 10 | 62 | 10 |
Syntax
<ul>
<li><data value="398">Mini Snow Hut</data></li>
<li><data value="399">Mini Kamakura</data></li>
<li><data value="400">Jumbo Kamakura</data></li>
</ul>Live demo
Data usage with tableinside.
table. eachsel to data element use, display and value separated.
Isbn/productco-d
write. ISBN or productco-d value attribute in mechanismallowread to attach.
Use cases
Product metadata
Expose readable product names while preserving an ID or canonical code for scripts and automation.
Structured inline values
Attach normalized values to human-friendly text in dashboards, lists, or small data tables.
Cautions
- If the value is time-specific, the time element may be the better semantic fit.
- Do not use data as a substitute for custom data-* attributes when the value is not part of the document content.
Accessibility
- The visible text should stand on its own; users should not need the hidden machine value to understand the content.
Related links
Powered by web-features