문제

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:

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

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top