Search code examples
htmlliststructuresemantics

Most semantically sound approach to listed sections


I'm currently working with an HTML5 page with a number of blocks of information, each of which has the same structure. Since the structure recurs for each block, I'd assume that the semantically sensible choice would be making each block an item in a list. However, the structure of the blocks is somewhat complex as each block contains a headline, a paragraph, a definition list, and an unordered list in that order. I would make a list of sections as follows:

<ul>
    <li><section><h1>1</h1><p>...</p><dl></dl><ul></ul></section></li>
    <li><section><h1>2</h1><p>...</p><dl></dl><ul></ul></section></li>
</ul>

However, I assume that li cannot legally contain section, correct? In that case, what would be the most semantically sound solution to my problem?


Solution

  • Reading through the HTML5 specification, it turns out that li elements are allowed to contain section elements; the specification for section categorizes it as Flow content which is conforms with li's Content model. Consequently, I'll write my markup as illustrated in the original example (which I previously assumed was illegal). Whether my intuition that the semantic implication is a list of structurally identical sections is still unclear (to me), though.