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.
It is important to note that <nav> can be used inside of the <header> element but can also be used on its own. By using <nav> as a way to label our navigation links, it will be easier for not only us, but also for web browsers and screen readers to read the code.
Use div in Web LayoutsYou can put together the header, nav, sections, and footer of a page in an individual div tag so they can be styled together.
I'd only insert an image in nav
if …
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With