Member-only story
The <data> Element
Have you ever come across a situation where you had an element that has a human readable version as well as a numerical ID or conversion that you would use as a source of truth? A list of products, for example, might have a human readable price that is $1,345.00, or even “One Thousand Three hundred Fourty Five” but the real value as you’d like your program to see it is “1345”.
Most developers reach for a data attribute, for example <li data-price=”1345”>$1,345.00</li>, but there is actually a semantic HTML element that can help with this use case as well as conveying the data to the browser: the <data> element.
You can use as in the example below:
This element is not commonly used across the internet. This is because data attributes offer the same functionality, plus have the ability to be used as a CSS selector. Additionally if the content is time- or date-related, the <time> element must be used. One advantage is that the <data>element accepts a value attribute, meaning that you can easily set or read the value in code.
