HTML <data> Element
The <data> element associates visible content with a machine-readable value. It is useful when the text shown to visitors is easy to understand while a separate value is needed for scripts, data processing, product identifiers, or other structured information.
Syntax
<data value="machine-readable-value">Visible Content</data>The <data> element uses both an opening and closing tag. The text between the tags is displayed to the visitor, while the value attribute stores the machine-readable value.
Attributes
The <data> element supports the global HTML attributes and the following element-specific attribute:
| Attribute | Description |
|---|---|
value |
Provides the machine-readable value associated with the element's visible content. |
Example
The following example displays product names while storing a separate product number for each item:
Usage Notes
The <data> element is useful when human-readable text and machine-readable data need to appear together in the same document.
The value attribute should contain the machine-readable form of the information, while the element's text content should remain understandable to visitors.
For values that represent a date or time, use the <time> element instead because it is specifically designed for temporal information.
The <data> element does not display its value attribute automatically. Scripts or other tools can read that value when needed.
Accessibility
The visible text inside the <data> element should clearly communicate the information visitors need to understand. Do not depend on the machine-readable value attribute to provide essential information because it is not normally presented to users.
If the machine-readable value is also important for people to know, include that information visibly in the page content rather than storing it only in the value attribute.
Browser Support
Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.
For detailed browser compatibility information, see Can I Use: HTML <data> Element .
Related Elements
<time> - Represents a date, time, or duration in a machine-readable format.
<meta> - Provides metadata about an HTML document.
<span> - Provides a generic inline container for text or other phrasing content.