Can I have a logo image inside a nav element?

thomasmyrman picture thomasmyrman · Aug 1, 2012 · Viewed 13.1k times · Source

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

j08691 picture j08691 · Aug 1, 2012

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.