I have a small set of structured data items that I would like embedded in an HTML document. The data is used by some JavaScript for interacting with the page, but is otherwise hidden.
I have considered using HTML5 data attributes, but I am unsure which element is most suitable for affixing stray data. I thought of using div
elements, like so:
<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>
This is a kludge, since the con开发者_开发知识库tent model of the div
element is flow content, which recommends at least one descendent. I also considered using an unordered list, but this is also a kludge for the same reason, since the content model of the li
element is also flow content.
I have searched for best practices regarding HTML5 data attributes, but since these attributes are relatively new and not yet in common use, little information is available.
Any other recommendations for a placeholder element to which to affix stray data attributes? Or am I going about this all wrong? Using something like JSON seems heavy handed for my needs...
i believe you tend to interpret the html5 spec too strictly. quoted from fc:
This requirement is not a hard requirement
so you might cling to attributing div
elements. if you add a unique class css-attributed with 'display:none'
to your dummy elements, they will not be rendered thus making the intricacies of flow content kind of moot.
if you feel more comfortable with phrasing content (pc), use empty span
elements instead.
alternatively, the meta
-tag might be an option:
<meta itemprop="data" content="dummy" data="..."/>
note that meta
-tags are allowed in the body
of a html5 doc (meta). while the itemprop
attribute (ip) is necessary for the use as a generic data container, according to the specs, a content
attribute ist not strictly necessary - however, you could always resort to some dummy string.
hope this helps,
best regards, carsten
精彩评论