非附属 HTML5 数据属性的占位符元素？答案

【问题标题】：Placeholder element for non-affiliated HTML5 data attributes?非附属 HTML5 数据属性的占位符元素？
【发布时间】：2011-08-18 02:35:56
【问题描述】：

我有一小部分结构化数据项，我想将它们嵌入到 HTML 文档中。该数据被某些 JavaScript 用于与页面交互，但在其他方面被隐藏。

我考虑过使用 HTML5 数据属性，但我不确定哪个元素最适合附加杂散数据。我想过使用div 元素，如下所示：

<div data-make="Ford"  data-model="Fusion"  data-year="2005"></div>
<div data-make="Chevy" data-model="Volt"    data-year="2010"></div>
<div data-make="Honda" data-model="Insight" data-year="2010"></div>

这是一个杂项，因为div 元素的内容模型是流式内容，它推荐至少一个后代。我也考虑过使用无序列表，但出于同样的原因，这也是一个杂项，因为li 元素的内容模型也是流内容。

我搜索了有关 HTML5 数据属性的最佳实践，但由于这些属性相对较新且尚未普遍使用，因此可用的信息很少。

对于添加杂散数据属性的占位符元素还有其他建议吗？还是我对这一切都错了？对于我的需求，使用 JSON 之类的东西似乎很繁重...

【问题讨论】：

标签： html custom-data-attribute

【解决方案1】：

我相信您倾向于过于严格地解释 html5 规范。引用自fc:

这个要求不是硬性要求

所以你可能会坚持归属div 元素。如果您向虚拟元素添加具有'display:none' 属性的唯一类css，它们将不会被渲染，从而使流内容的复杂性变得毫无意义。如果您对措辞内容 (pc) 感觉更舒服，请改用空的 span 元素。

或者，meta-tag 可能是一个选项：

<meta itemprop="data" content="dummy" data="..."/>

请注意，meta-tags 允许在 html5 文档 (meta) 的 body 中使用。虽然 itemprop 属性 (ip) 是用作通用数据容器所必需的，但根据规范，content 属性并非绝对必要 - 但是，您总是可以求助于一些虚拟字符串。

希望这会有所帮助，

最好的问候，卡斯滕

【讨论】：

我理解非空流内容是建议而非要求。但是，规范中的两个示例都建议将空流内容作为将动态添加的内容的占位符。此外，规范不鼓励 div 元素作为实践问题，称它们应该是最后手段的元素（尽管我不同意）。
微数据方法是一种有趣的方法。它会起作用，因为具有itemprop 属性的meta 元素可以在任何允许使用短语内容的地方使用。可以通过将itemscope 添加到元元素的公共父级来创建组。不幸的是，尚不支持微数据 API，这使得它不如 data 属性方便。
决定采用meta 元素的微数据是可行的方法。