HTML标记上的非标准属性。好事？坏事？你的意见？

Question

HTML标记上的非标准属性。好事？坏事？你的意见？

HTML（或者只是XHTML？）在标签上的非标准属性方面相对严格。如果它们不是规范的一部分，那么您的代码将被视为不符合规范。

然而，非标准属性对于将元数据传递给Javascript非常有用。例如，如果假设链接显示弹出窗口，则可以在属性中设置弹出窗口的名称：

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

或者，您可以将弹出窗口的标题存储在隐藏元素中，例如span：

<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

自定义属性提供了将额外数据传输到客户端的便捷方式。Dojo Toolkit定期执行此操作，并指出（Debunking Dojo Toolkit Myths）：自定义属性始终是有效的HTML，它们只是在针对DTD进行测试时不进行验证。[...] HTML规范规定，用户代理中的HTML呈现引擎会忽略任何未识别的属性，Dojo可以选择利用此功能来提高开发的便利性。

Answer 2

另一个选择是在Javascript中定义这样的东西：<script&nbsp;type="text/javascript">var&nbsp;link_titles&nbsp;=&nbsp;{link1:&nbsp;"Title&nbsp;1",&nbsp;link2:&nbsp;"Title&nbsp;2"};</script>然后，您可以稍后在Javascript代码中使用它，假设您的链接具有与此哈希表中的ID对应的ID。它没有其他两种方法的缺点：没有非标准属性，也没有丑陋的隐藏跨度。缺点是对于像你的例子那样简单的事情可能有点过分。但对于更复杂的场景，您需要传递更多数据，这是一个不错的选择。特别是考虑到数据是作为JSON传递的，因此您可以轻松地传递复杂对象。此外，您将数据与格式分开，这对可维护性是一件好事。你甚至可以拥有这样的东西（你不能用其他方法真正做到）：var&nbsp;poi_types&nbsp;=&nbsp;{1:&nbsp;"City",&nbsp;2:&nbsp;"Restaurant"};var&nbsp;poi&nbsp;=&nbsp;{1:&nbsp;{lat:&nbsp;X,&nbsp;lng:&nbsp;Y,&nbsp;name:&nbsp;"Beijing",&nbsp;type:&nbsp;1},&nbsp;2:&nbsp;{lat:&nbsp;A,&nbsp;lng:&nbsp;B,&nbsp;name:&nbsp;"Hatsune",&nbsp;type:&nbsp;2}};...<a&nbsp;id="poi-2"&nbsp;href="/poi/2/">Hatsune</a>而且由于您最有可能使用某种服务器端编程语言，因此该哈希表应该是动态生成的（只需将其序列化为JSON并将其吐入页面的标题部分）。