Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML How to Make a Website Creating HTML Content Use the Navigation Element

Posted by Christopher Sea
Christopher Sea
3,726 Points

Would it be semantically correct to have 2 <nav> elements; the 1st, for the site logo & the 2nd for the list of links?

I guess what I really wanted to know is if the <nav> is used for any type of navigation (needed around any links on the page) or only for the list of links (on the top or side) of the page that direct to the other pages on the site. Thanks for any answer.

Derek Etnyre
Derek Etnyre
20,822 Points
Derek Etnyre
Derek Etnyre
20,822 Points

It should be used for the list of links. Would setup the logo up as a href link.

3 Answers

Austin Whipple
Austin Whipple
29,725 Points
Austin Whipple
Austin Whipple
29,725 Points

It's not technically incorrect to use the nav element in both places like that. However, the W3C recommends its use for major navigation elements rather than all links on a page, so I would avoid using it for the logo alone since, while important, I wouldn't call it central or even highly critical site navigation. This stackoverflow thread has some additional helpful information.

Adam Rolfson
Adam Rolfson
2,132 Points
Adam Rolfson
Adam Rolfson
2,132 Points

Hey Chris - "nav" is really just a special "div" for the page navigation. It is best practice to use just one "nav" with other children elements. You do not have to use list items <li> inside them, that is just one good way to arrange the navigation elements.

Try doing what you envision a few different ways, try using different elements and applying different styles to get the look and behaviors you want. If you get lost, a good place to use for reference is w3schools.

Craig Watson
Craig Watson
27,930 Points
Craig Watson
Craig Watson
27,930 Points

Hi Chris,

I would be arranging things like this:

<div class="nav-wrap">
    <div class="nav-wrap-inner">
        <a class="logo-wrap">
            <img class="logo" src="http://placehold.it/50x50">
        </a>
        <nav class="main-nav">
            <ul class="nav">
                <li class="nav-item">Item 1</li>
                <li class="nav-item">Item 2</li>
                <li class="nav-item">Item 3</li>
                <li class="nav-item">Item 4</li>
                <li class="nav-item">Item 5</li>
            </ul>
        </nav>
    </div>
</div>

As other guys have said, you only want one "nav" element on the page. I structure my navs as above with the inner wrapper because I use flexbox and this lets be display the outer div as block with and !important flag and then flexbox takes care of the rest inside that with ease :)

If you want me to set up a pen with plain css to get you going I will because a nav is something I pondered over for a long time not really knowing the best ways to do them especially when it comes to responsive and mobile dropdown enabled ones to :)

Craig