The `data` HTML element

It is useful whenever the human-readable and machine-readable representation of a value are different. Consider the following table:

Location	Population	% of World
India	1,417,492,000	17.2%
China	1,404,890,000	17.0%
United States	341,784,857	4.1%

<table>
  <thead>
    <tr> <th> Location <th> Population <th> % of World
  <tbody>
    <tr> <td> India <td> 1,417,492,000 <td> 17.2%
    <tr> <td> China <td> 1,404,890,000 <td> 17.0%
    <tr> <td> United States <td> 341,784,857 <td> 4.1%
</table>

The numbers and percentage values are formatted to be human readable. The <data> element lets us add a machine-readable version in the value attribute without changing the human-facing text.

<data value=1404890000> 1,404,890,000 </data>

The human-readable formatting of a value may change depending on locale, while the machine-readable version is always the same.

Use-cases

Say you want to add some JavaScript that allows the user to sort the table by the value of one particular column. You can, of course, write a function that parses a human-readable value such as 1,404,890,000 or 17.0% back into a number, but it is much easier if you already have the numeric value in the value attribute:

<td> <data value=1404890000> 1,404,890,000 </data>
<td> <data value=0.17> 17.0% </data>

Another use-case is whenever you have a functionality that allows the user to copy a numeric value to their clipboard, to be pasted in a table calculation software or some other program that requires numeric values. Instead of copying the user-facing formatted text, you can write the machine-readable numeric value to the clipboard. In a recent project, I implemented a copy-to-clipboard element that writes its content to the clipboard when clicked. It could be used as follows:

<copy-to-clipboard> India </copy-to-clipboard>
<!-- copies "India" when clicked -->

<copy-to-clipboard> <data value=1417492000> 1,417,492,000 </data> </copy-to-clipboard>
<!-- copies "1417492000" when clicked but displays "1,417,492,000" -->

You may interject that simple parsing code could convert the human-readable form into a machine-readable number, making the data element obsolete. However, the differences in notation can become more complex. Consider a use case where you present monetary amounts in different currencies, e.g. $50 or 50€. Your code would need to handle the following examples, among many others:

$45,090.70 — here, the comma is the thousands separator and the dot is the decimal separator.
45.090,70€ — here, the dot is the thousands separator, and the comma is the decimal separator.
B/. 45,090.70 — here, the first dot is part of the currency symbol of the Panamanian Balboa, the comma is the thousands separator and the second dot is the decimal separator
٤٥٬٠٩٠٫٧ ريال سعودي — 45,090.70 Saudi Arabian Riyal expressed in eastern arabic numerals.

From experience I can say that writing such parsing code, while possible, is not trivial.

The `data` element's best friend: The `time` element

When representing a date and/or time value, use the <time> element with the datetime attribute instead.

<time datetime=2026-06-20> Saturday, June 20 2026 </time>

Unlike the value attribute of the data element, the datetime element of the time element is optional, you can omit it if the text content is already machine readable:

<time> 2026-06-20 </time>

The data HTML element

Use-cases

The data element's best friend: The time element

The `data` HTML element

The `data` element's best friend: The `time` element