The <data> Element
As defined in the HTML Living Standard, the <data> element links a human-readable piece of content with a machine-readable translation in its value attribute.
- Product: Standard Access Pass
- Price: $49.99 USD
<ul>
<li><data value="SKU-9912">Standard Access Pass</data></li>
<li><data value="49.99">$49.99 USD</data></li>
</ul>
View HTML Living Standard: The data element
Technical Requirements
- The
valueAttribute: This attribute is mandatory. It must contain the machine-readable version of the element's contents. - Purpose: It is used to provide scripts or search engines with a precise value that might be formatted differently for the user (e.g., currency symbols or localized product names).
WCAG Requirement: Info and Relationships
Success Criterion 1.3.1 (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.
While the <data> element doesn't change the visual presentation, it strengthens the programmatic relationship between the visible text and the underlying data. This helps specialized assistive tools and scripts extract meaningful information without relying on complex text parsing.
Data vs. Time
It is important to distinguish between <data> and <time>:
<time>: Specifically for dates, times, and durations. It has a specializeddatetimeattribute.<data>: For all other types of data, such as product IDs, ISBN numbers, or raw numerical values.
A11y Tip: Beyond Presentation
Semantic elements like <data> are the building blocks of a "Semantic Web." By being explicit about what a piece of text represents, you ensure that future technologies (and current browser extensions) can offer enhanced functionality—like one-click product comparisons or automated price tracking—for all users.