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 content 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:
so you might cling to attributing
divelements. 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
spanelements instead.alternatively, the
meta-tag might be an option:note that
meta-tags are allowed in thebodyof a html5 doc (meta). while theitempropattribute (ip) is necessary for the use as a generic data container, according to the specs, acontentattribute ist not strictly necessary – however, you could always resort to some dummy string.hope this helps,
best regards, carsten