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

Posted by Brian Hayes
Brian Hayes
20,986 Points

Primary Navigation: inside or outside <header>?

I've always been in the habit of placing my main nav element in a header element, however, recently as I have been working on a project that works heavily with the Zurb Foundation for Sites framework I noticed that they do not have the main nav element within a header element.

So I've started to wonder which method is actually semantically more correct?

Nicholas Grenwalt
Nicholas Grenwalt
46,626 Points

For this it is really just personal preference. There isn't a semantically correct place for a nav element. They can be placed wherever makes the most sense for the site and its layout. They can be placed wherever the designer feels that they will provide the best user experience on a page.

2 Answers

Jake Lundberg
Jake Lundberg
13,965 Points

There is no semantically correct answer for this one. People tend to put the nav element inside the header because that is generally where navigation lives, but there is no rule that says this element HAS to be inside the header. It is whatever you prefer/choose to do.

Alexander Mooney
Alexander Mooney
7,321 Points
Alexander Mooney
Alexander Mooney
7,321 Points

It all depends on how you want to build your website. Typically the nav element is placed inside the header because the navigation is a part of the header. However, if you were designing your website so that navigation was located on the sidebar, you would probably want to place the nav element within the sidebar section. Hope this answer helped!