Question

In the interest of writing semantic and solid markup, can I position a logo image inside a nav element? Right before the ul element.

<nav>
    <img id="logo" />
    <ul>
        <li>a</li>
        <li>b</li>
    </ul>
</nav>

Or should I wrap it all in another element like so:

<section id="navigation">
    <img id="logo" />
    <nav>
        <ul>
            <li>a</li>
            <li>b</li>
        </ul>
    </nav>
</section>

I would prefer the first one to minimise the markup.

Answer 1

Yes, there’s no problem with placing an image within a <nav> tag. Per the MDN and W3C, flow content is permitted content for this tag and among many other elements is the <img> tag.