在“<a>` anchor tag?</a>中存储一些数据的正确方法是什么？

Question

我通常使用data-***来存储一些数据。

<a href="#" data-address="some data">click</a>

我可以使用

在jquery中获取它

alert($("a").data("address"));

它工作正常。但我想知道它是正确的做法，是否存在任何兼容性问题？

或者我需要使用rel ie：

<a href="#" rel="some data">click</a>

alert($("a").attr("rel"));

我更新了一个小提琴http://jsfiddle.net/suhailvs/XYZQK/

Answer 1

引用rel标记时，a属性是搜索引擎确定文档与其链接的文档之间的关系。

开发人员可以使用data属性在将数据存储到其中时创建自定义属性。

表示data-***是存储某些数据的正确方法。

MDN HTML attribute reference

不要使用REL来定制数据存储

兼容性问题

由于浏览器会忽略data和rel（引用a标记）属性，因此您可以同时使用/和。虽然最佳做法是使用data标记来存储“数据”。

---

丰富的搜索结果

如果您希望搜索引擎将某些链接或元素作为描述您内容的数据，例如页面描述，发布日期，页面图像等等，您可能需要阅读“丰富的搜索结果”和“丰富的内容”来自谷歌的片段。

这些链接会引导您Rich search results或About rich snippets and structured data

Answer 2

如果您想暂时存储数据（即仅在页面持续时间内），那么使用.data() api是正确的方法

Answer 3

这是一篇关于为什么你不应该使用rel的文章，以及如果你不确定使用数据你可以尝试什么 - 。

http://www.sitepoint.com/rel-not-a-custom-attribute/

Bootstrap已经大量使用数据 - 没有理由不进一步使用它。

Answer 4

使用以“data - ”开头的自定义数据属性存储数据是正确的。

符合HTML5规范。

请参阅以下链接。

http://www.w3.org/html/wg/drafts/html/master/dom.html#embedding-custom-non-visible-data-with-the-data- * - 属性

Answer 5

您滥用data-属性，因此对于您的用例，它们都不正确（rel永远不会）。

我要么改变HTML的结构以容纳额外的信息（即使用其他标签），要么只是将内容存储在JavaScript对象中。将它全部塞进一个锚标签并不是一个好主意。