HTML中的数据元素和数据属性有什么区别

Question

我最近遇到了数据元素并且非常了解目的。我想甚至数据属性都可以用来以机器可读的格式获取和检索数据。

数据元素：

<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>元素非常有用。