10

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.

unor
  • 92,415
  • 26
  • 211
  • 360
thomasmyrman
  • 195
  • 2
  • 2
  • 8

2 Answers2

8

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.

unor
  • 92,415
  • 26
  • 211
  • 360
  • Sorry if this comment seems a bit random, but I have one question. Do you mean that in case the Logo replaces the link often called 'Home', it should be *inside* the `ul`, but when there is a link 'Home' and the Logo is also linked, then the logo should be *outside* of the `ul` (but the Home-link of course inside)? – Sven Oct 22 '13 at 19:49
  • 1
    @Sven: If you have both, a linked logo and a link "Home", only the "Home" link should go in `nav`, yes. If you have a linked logo only, and this logo represents the site title (which is the case for most sites), it should *not* go in `nav`. My last HTML example is only for rare cases (and you’d need an additional site heading, then). – unor Oct 26 '13 at 20:17
6

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.

Michael Mior
  • 28,107
  • 9
  • 89
  • 113
j08691
  • 204,283
  • 31
  • 260
  • 272