HTML data element: pair visible labels with machine values

Use it in a concrete workflow

An inventory page names a part in prose while retaining its stable stock code in markup. The code is useful to a script or extractor, but it is not a substitute for a proper database key in the backend. If the value is a date or time, use time instead so the temporal meaning is explicit. The displayed name remains what a person reads, even if the internal identifier changes between systems.

<p>Replacement part: <data value="bearing-47B">sealed bearing</data>.</p>
<p>Warehouse slot: <data value="west-aisle-9">West aisle, shelf nine</data>.</p>

Behavior and ownership

Data does not fetch a record or enforce that the code exists. A server response must keep the visible label and value consistent with the same inventory state; client code should not trust a value copied from another page.

Performance and maintenance

The element is light. The maintenance cost lies in keeping machine identifiers stable and reconciling them after catalog migrations, not in rendering two short spans of markup.

Common Mistakes

• Do not use data to hide sensitive identifiers from a page visitor.
• Do not place a date in data when time expresses it better.
• Do not let the label and value describe different parts.

Connected lessons

• HTML time and data: pair readable copy with machine-readable values
• HTML inline text: emphasis, importance, code, and abbreviations
• HTML global attributes: keep id, class, and data-* jobs separate