HTML <data> Tag

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:

<!DOCTYPE html>
<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:



Attributes:

<data> element also uses the Global Attributes.

Attributes Value Description
value It defines a machine readable version of the content.