Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

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

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,712 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.

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.

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