RSSAmplifier

jfhr's blog

The data element

Read inOriginalenesdefrptjaitzh
0
Sign in to vote or save

This page cannot be shown here. You can still read it on the original site — the toolbar below keeps your place in the directory.

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>…

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>

Comments

Nothing yet. Say the first thing.

    Sign in to join the conversation.