HTML中的数据元素和数据属性有什么不同

Question

我最近偶然发现了data element，并且非常理解它的目的。我认为甚至数据属性也可以用来以机器可读的格式获取和检索数据。

数据元素：

<p>New Products</p>
<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>

数据属性：

<p>New Products</p>
<ul>
 <li data-value="3967381398">Mini Ketchup</li>
 <li data-value="3967381399">Jumbo Ketchup</li>
 <li data-value="3967381400">Mega Jumbo Ketchup</li>
</ul>

什么时候应该使用数据元素，什么时候应该使用数据属性？

Answer 1

根据此链接：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/data

可以将数据值与人类可读的等价物(如书名)关联起来，它就是ISBN。

Answer 2

是的，但有时值可以出现在其他文本中，所以如果希望对值使用data-*属性，则必须将其包装在<span>或类似元素中。<data>元素在这些情况下很有用。