Search code examples
htmlhtml-listssemantic-markup

Semantics of putting main content in a list item


As the title says, I'm considering putting the main content of my HTML pages inside a list item. I don't know how semantic that is. Articles on lists don't get heavily specific (as perhaps they shouldn't) on what is considered an item of a list. So consider the following:

<ul>
    <li><h5>Main Content</h5>
        <ul>
            <li><article><h1>Article Title</h1>
                    <p>Here's my main, feed-ready content.</p></article></li>
            <li><aside>Related Links</aside></li>
        <ul>
    </li>
    <li><aside>Recommended Links</aside></li>
</ul>

Now, I come about this arrangement for styling purposes (I know... worst place to start a semantics conversation). My <ul>'s are styled with display:table; and <li>'s styled display:table-cell; elsewhere in my markup. So it'd be sooo convenient if I could just carry that down to my main content as well.

Not so much looking for best practice (although feel free to comment) but if this is semantically an incorrect thing to do.


Solution

  • As long as they are child elements of the li and not sibling elements, it is semantically fine and valid in HTML4 and HTML5.

    An example of what is fine:

    <ul>
        <li><article>Article Here</article></li>
        <li></li>
    </ul>
    

    An example of what isn't fine:

    <ul>
        <li></li>
        <article>Article here.</article>
        <li></li>
    </ul>
    

    The permitted contents section here explains more about what a li can contain (basically any flow element, shown below).

    enter image description here