In an online shop, every product shows a readable name, "Navy blue t-shirt", but a sorting or filtering script needs a stable reference, a value that never changes even if the displayed name gets tweaked later by the marketing team. How do you link the two without duplicating the information or hiding it in an attribute never meant for that purpose?
<data> answers exactly that need: it associates human-readable text with a machine-usable value, without changing anything about what shows on screen.
Definition
<data> wraps text meant for display and carries, through its value attribute, the matching machine value. The visible content stays what the visitor sees, while value stays invisible on screen and only exists for scripts or tools parsing the page.
Syntax and the required value attribute
The value attribute is not optional: without it the tag loses its entire purpose, since what it carries is exactly what sets <data> apart from a plain piece of text.
<ul>
<li><data value="REF-2481">Navy blue t-shirt</data></li>
<li><data value="REF-2482">Heather grey t-shirt</data></li>
</ul>The content of the value attribute stays visible in the page's source code, like any HTML attribute: it is not a privacy mechanism, only a way to attach a stable value to displayed text. Never put sensitive information in it that you would not want showing up in the page source.
Difference with <time> for dates
<data> suits any generic machine value, a product reference, a postal code, an identifier. Dates and times follow a separate rule, with the <time> tag and its own datetime attribute, specifically recognised by browsers and by outside tools such as calendars or search engines.
| Tag | Attribute | Type of value |
|---|---|---|
<data> | value | Generic machine value, any kind |
<time> | datetime | Date or time, normalised format |
A concrete use case
In a dynamically generated list of products, a script can read the value attribute of each <data> to sort or filter items by a stable reference, never depending on the displayed text, which may change over time. <data> belongs to a small family of tags that pair visible text with a usable value: <meter> does the same for a measurement within a known range, and <output> for the calculated result of a form.
A store locator offers another common example: each row shows a readable city name, "Paris 15th", while the value attribute carries the exact postal code, "75015", used by a location search script to sort results by proximity without ever rewording the text shown on screen.
Best practices
- Only use
<data>when no more specialised tag already fits better, in particular not for dates, which belong to<time>. - Always keep the displayed text understandable on its own, without depending on a script reading the machine value, since not every visitor necessarily has that script running.
- Never rely on the
valueattribute to hide sensitive information: it stays perfectly readable in the page's source code, like any other HTML attribute.
Frequently asked questions
Does the content of the value attribute show up anywhere on the page?
No, never by default. Only the text placed between the opening and closing tags shows on screen, the attribute's value stays reserved for scripts or for a curious person inspecting the source code.
Can <data> be used for a date if <time> looks complicated?
That is not recommended: the specification explicitly reserves dates and times for <time>, whose attribute format is checked and understood by outside tools such as calendars or search engines, a benefit <data> does not offer.
What happens if the value attribute gets left out?
The page does not break, but the tag loses its entire purpose: it displays as a plain piece of text, with no machine value attached, which in practice amounts to not having used <data> at all.