非标属性的HTML标签。好事吗？坏事？你的意见？非标属性的HTML标签。好事吗？

HTML（或者只是XHTML？）是较严格的当谈到对标签不规范的属性。如果它们不是规范的一部分，那么你的代码被视为不符合规定。

非标属性可以是沿元数据传递到的Javascript但相当有用的。例如，如果一个链接是假设显示弹出式窗口，您可以设置一个属性弹出窗口的名称：

<a href="#null" class="popup" title="See the Popup!" 
   popup_title="Title for My Popup">click me</a>

或者，你可以存储标题弹出在一个隐藏的元素，像一个跨度：

<style>
    .popup .title { display: none; }
</style>
<a href="#null" title="See the Popup!" class="popup">
    click me
    <span class="title">Title for My Popup</span>
</a>

但是我撕掉了哪个应该是首选方法。第一种方法是更简洁，我猜，与搜索引擎和屏幕阅读器尽可能不拧。相反，第二选项使得存储大量数据更容易的，并因此，更通用。这也是符合标准的。

我很好奇这是什么想法的社区是。你如何处理这样的情况？做的第一方法的简单性大于潜在的缺点（如果有的话）？

Answer 1:

我建议的HTML 5的解决方案（一个大风扇的data-前缀属性）。编辑：我想补充一点，还有的使用自定义属性的可能是更好的例子。举例来说，数据的自定义应用程序将使用在标准的属性没有模拟（如自定义事件处理程序的基础上的东西，不一定能在类名或ID来表示）。

Answer 2:

自定义属性提供了一个便捷的方式来额外的数据携带到客户端。 Dojo Toolkit的定期这样做的，它已经指出（揭穿Dojo Toolkit的神话）指出：

自定义属性一直有效的HTML，他们只是在对一个DTD测试不验证。 [...] HTML规范规定，不承认任何属性是由HTML渲染引擎在用户代理忽略和Dojo可选利用了这一点，以提高开发的简易性。

Answer 3:

另一种选择是在Javascript定义是这样的：

<script type="text/javascript">
var link_titles = {link1: "Title 1", link2: "Title 2"};
</script>

然后你可以使用这个以后在你的Javascript代码，假设你的链接有对应于该散列表中ID的ID。

它没有其他两种方法的缺点：没有不规范的属性，也不丑隐藏的范围。

缺点是，它可能有点事情就这么简单的例子矫枉过正。但是对于比较复杂的情况，你有更多的数据传递，这是一个不错的选择。特别是考虑到数据被作为JSON过去了，这样你就可以轻松通过复杂的对象。

另外，你把数据从格式化，这是可维护性好东西分开。

你甚至可以有这样的事情（你不能真正做到与其他方法）：

var poi_types = {1: "City", 2: "Restaurant"};
var poi = {1: {lat: X, lng: Y, name: "Beijing", type: 1}, 2: {lat: A, lng: B, name: "Hatsune", type: 2}};

...

<a id="poi-2" href="/poi/2/">Hatsune</a>

既然你最有可能使用一些服务器端编程语言，这个哈希表应该是微不足道的动态生成（只是将其序列化到JSON和吐在页面的页眉部分）。

Answer 4:

那么在这种情况下，最佳的解决方案是

<a href="#" alt="" title="Title of My Pop-up">click</a>

并使用title属性。

有时我打破了规范，如果我真的需要它。但是很少，只有有很好的理由。

编辑：不知道为什么-1，但我指出，有时你认为你需要打破规范，当你不知道。

Answer 5:

为什么不宣布在自定义DTD的popup_title属性？这解决了验证问题。我这样做是与每一个非标准的元素，属性和值，并感谢该验证，说明我的只有我的代码实际问题。这也使得少用这样的HTML浏览器的任何错误。

Answer 6:

你可以窝隐藏输入元素中的锚元素

<a id="anchor_id">
  <input type="hidden" class="articleid" value="5">
  Link text here
</a>

然后你就可以轻松地将数据输出通过

$('#anchor_id .articleid').val()

Answer 7:

我到底的解决方案是在隐藏通过某种定界符的分离的ID标签的附加数据（一个下划线是一个空间，二是arg的）结束时，所述第二ARG有一个id：

<a href="#" class="article" id="Title_of_My_Pop-up__47">click</a>

丑陋，它假设你不是已经使用别的ID标签，但它跨越每一个浏览器兼容。

Answer 8:

我在你的榜样个人的感觉是跨度路线是比较合适的，因为它符合XHTML规范的标准。不过，我可以看到自定义属性的argment，但我认为他们添加混乱的水平是没有必要的。

Answer 9:

我已经费尽我的大脑了这一点。我喜欢的非标准属性的可读性，但我不喜欢，这将打破标准。隐藏的跨度的例子是兼容的，但它是不是很可读。那这个呢：

<a href="#" alt="" title="" rel="{popup_title:'Title of My Pop-up'}">click</a>

这里代码非常可读的，因为JSON的键/值对符号的。你可以说这是只是看它属于链接的元数据。我可以劫持“相对”属性旁边看到的唯一的缺陷是，这将变得混乱复杂的对象。我真的很喜欢的“数据 - ”上面提到的前缀属性这一想法。做任何当前浏览器支持呢？

这里是别的东西去思考。影响有多大不兼容的代码对搜索引擎优化？

文章来源: Non-Standard Attributes on HTML Tags. Good Thing? Bad Thing? Your Thoughts?