带有data- *前缀或不带的自定义属性？

问题描述：

HTML5规范定义了如何设置自定义使用数据 - 属性*前缀，像：带有data- *前缀或不带的自定义属性？

<div data-attr="somedata"></div>

但会是什么区别，如果我们只是写：

<div attr="somedata"></div>

实际上我更喜欢第二种方式，因为它更短。
我可以使用getAttribute()方法访问这两个属性。

那么错误的是不使用数据前缀？我只在Chrome和IE11上测试过，所以也许还有其他浏览器需要担心？

基本原因是，将来你的'attr'可能被用作标准中的一个属性。您的（可能）不符合标准的使用可能会导致任何问题。因此创建'data-'命名空间是为了防止这种冲突。 – Sirko

这个问题类似于：我应该在“data-”中加入自定义属性吗？ http://*.com/questions/2450585/why-should-i-prepend-my-custom-attributes-with-data/2451188#2451188 – ckckckc

可能的重复[为什么我应该用“data- “？]（https://*.com/questions/2450585/why-should-i-prepend-my-custom-attributes-with-data） – leemes

答

HTML5将data-*属性定义为有效，而其他自定义属性不是。所以呢？

如果您通过HTML验证程序运行代码，它将查找无效属性。除此之外，他们可能会指出一个错字。 HTML5验证器将接受data-*属性，但它不是通灵。它无法判断哪些其他新属性是该计划的一部分。
如果您创建一个新属性，它可能无法很好地与HTML中的未来更改一起玩，这可能巧合地将相同的属性名称用于不同的目的。 data-*属性免于未来的实现。
以上的推论是，包括额外的库，也做任意改变可能会干扰你自己的代码。
JavaScript通过在dataset属性中为每个元素自动收集这些属性来配合data-*属性。如果你构成另一个属性，它将不会被包含。

如果上述要点都不重要，那么请务必使用您喜欢的任何属性名称。关于上面的最后一点，您可以随时使用JavaScript的*Attribute函数访问您自己的任意属性，这些函数在任何属性上都能正常工作，而不管其有效性如何。

说到JavaScript，没有关于JavaScript的HTML有效性的概念，并且您可以使用JavaScript来指定您喜欢的任何属性名称，而不用担心HTML验证器警察敲你的门。但是，您仍然冒着与其他库或未来实现竞争的风险。