We use HTML <data> element to provide a machine readable version for the content.
It is useful when we want a certain formatted data but we don't want it to be seen by the users.
The <data> element comes in pairs. The content must be written between opening ( <data> ) and closing ( </data> ) elements.
Especially giving IDs to products is a good example for this tag. When we give an ID to a product, machine will understand but we cannot show ID to the users instead of the product's name because they cannot understand it. But by using <data> element along with value attribute, we can show the product's name to the users while computer gets a certain formatted data.
Meantime, you must use <time> element, when the content is related with a time or date.
The <data> element is not supported on all browsers.
Let's see an example:
<html> <body> <p>Drinkable Products</p> <ul> <li> <data value="1545325112">Coca-Cola 500 ml</data> </li> <li> <data value="1545325113">Coca-Cola 330 ml</data> </li> <li> <data value="1545325114">Coca-Cola Light 330 ml</data> </li> </ul> </body> </html>
Here the result is:
<data> element also uses the Global Attributes.
|value||It defines a machine readable version of the content.|