Can I have a logo image inside a nav element?

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.

Solution 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.

Solution 2

I'd only insert an image in nav if …

• … this image is linked to a page/anchor (for example a link to the front page), or
• … this image contains the text "Navigation" or similar (so it should be inserted in a h1)

The spec says:

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.

So this section shouldn't contain things not about navigation.

Your second example is not what you want, because you would create a wrong outline (because of the outer section).

If it's the main navigation of the page and the image is the site logo, I'd use this markup:

<header>

 <h1><a href="index.html" title="Home page"><img src="logo.png" alt="ACME Inc."></a></h1>

 <nav>
   <ul>
     <li>a</li>
     <li>b</li>
   </ul>
 </nav>

</header>

If you'd like to link the logo to the home page and the home page is not linked in the ul, I'd insert it in the nav:

<nav>
 <ul>
   <li><a href="index.html" title="Home page"><img src="logo.png" alt="ACME Inc."></a></li>
   <li>a</li>
   <li>b</li>
 </ul>
</nav>

But this is a rare case, because you would still need a page heading and in most cases this would be the logo, and in most cases this should be linked to the home page of the site.