I wonder why you use the data tag.

Hello, I'm Yamoo.

We are answering your inquiry. :-)

The <data> element is newly added to HTML5 to accommodate the need for a wider data format than machine-readable. The value property value will be interpreted by the machine, and this property must be used.

This element is used by the Programming Group for processing information, so it does not have to be displayed on the User Screen (View) bar.

For example, if you have hyperlink structuring associated with a book title, exposing the unique ID values of each book is long-coded and not easy for humans to read. (You can't tell the title of the book just from the ID values of the book.)

In this case, you can structure it with the <data> element to enter the Book ID value for the machine to read it, and include human-readable content inside.

<a
  href="/bookdb/book_detail/?bid=13364709"
  target="_blank">
  <data value="13364709"> Shape of Water</data>
</a>

It can also be used to structure the product ID into data values, as shown below.

<h4 class="new-item headline is-4">New products</h4>
<ul>
 <li><data value="3967381398"> Mini Ketchup</data></li>
 <li><data value="3967381399">Jumbo ketchup</data></li>
 <li><data value="3967381400"> Mega Jumbo Ketchup</data></li>
</ul>

NOTE For structuring where data values are associated with date/time The <time> element is more appropriate.

<p>
  I'm not sure if I'm with her 
  <time datetime="2018-03-19T20:00-21:00"> The first day we met was late at night</time>
  It went on.
</p>

Browser compatibility (2018.03.19) - IE / Safari not supported