Problem
I know that in HTML5, the nav> element can be used inside or outside the page’s masthead header> element. It appears typical to include the secondary navigation as a nav> element inside the masthead header> element, and the main navigation as a nav> element outside the masthead header> element for websites with both secondary and main navigation. If the website does not include secondary navigation, the main navigation seems to be included in a nav> element within the masthead header> element.
If I follow these examples, the addition or omission of secondary navigation will determine the organization of my material. This creates an unnecessary and unnatural link between the content and the style.
Is there a better way to avoid changing the primary navigation from inside to outside the masthead header> element depending on whether secondary navigation is present or not?
<header>
<nav>
<!-- Secondary Navigation inside <header> -->
<ul>
<li></li>
</ul>
</nav>
<h1>Website Title</h1>
</header>
<nav>
<!-- Main Navigation outside <header> -->
<ul>
<li></li>
</ul>
</nav>
OnlineDegrees.org is an example of a site that matches the pattern described above.
<header>
<h1>Website Title</h1>
<nav>
<!-- Main Navigation inside <header> -->
<ul>
<li></li>
</ul>
</nav>
</header>
Keyzo.co.uk is an example of a site that follows the pattern described above.
Bruce Lawson’s Introducing HTML5 and Remy Sharp’s thoughts on the matter are as follows:
According to that last phrase, Bruce Lawson, the author of the chapter from which those passages are taken, concedes that “pragmatic considerations about ease of styling” result in a coupling of content and style.
Asked by Matthew Rankin
Solution #1
It is all up to you. You can put them in the header or not, as long as the elements within them are just for internal navigation (i.e., don’t link to external sites like a twitter or Facebook account).
They’re usually placed in the header because that’s where the navigation is most typically found, but this isn’t always the case.
HTML5 Doctor has more information on the subject.
Answered by Ian Devlin
Solution #2
I do not like putting the nav in the header. My reasoning is:
Logic
The document’s header offers introductory information. The navigation is a menu that contains hyperlinks to other documents. This, in my opinion, indicates that the nav’s content belongs to the site rather than the paper. If the NAV had forward linkages, this would be an exception.
Accessibility
I prefer to have menus at the end of the source code instead of at the beginning. I use CSS to send it to the top of a computer screen or leave it at the end for text-speech browsers and small screens. This avoids the need for skip-links.
Answered by Yet Another Geek
Solution #3
Because it’s unclear if you’re asking for opinions (e.g., “it’s common to do xxx”) or rules (e.g., “it’s common to do xxx”), I’m going to go with rules.
The examples you provide appear to be based on the nav element’s spec samples. Remember that the spec is constantly changing, and the rules can be confusing at times, so I imagine that many people will simply follow the instructions rather than interpret them. Because you’re providing two different cases with different behaviors, there’s only so much you can deduce. Is there an opposing sub/nav situation on either of those sites, and if so, how do they handle it?
Most importantly, there’s nothing in the spec that says one option is better than the other. One of the purposes of HTML5 was to be very clear about semantics, requirements, and so on, therefore the exclusion is noteworthy. As far as I can see, the examples are independent of each other and equally valid within their own context of layout requirements, etc.
It’s a little ridiculous to make the nav’s source position conditional (another red flag). Simply choose a way and stick to it.
Answered by Su’
Solution #4
@IanDevlin is absolutely correct. According to MDN’s policies,
“The HTML Header Element “” specifies a page header, which commonly includes the site’s logo and name, as well as a horizontal menu…”
The word “maybe” is crucial. It continues by stating that the header does not have to be a site header. For example, you may include a “header” on a pop-up modal or other modular elements of the document where a header exists, which would be useful for a screen reader user to know about.
It refers to the use of NAV that is implied. It can be used anywhere there is organized site navigation, though it’s commonly reserved for mini-navs and significant site links in the “footer” section.
It ultimately boils down to personal / team preference. Decide what is more significant and important to you and your team, and then attempt to stick to it. If the navigation is in line with the logo and the main site’s “h1,” I think it makes sense to put it in the “header,” but if you have a different design preference, you’ll have to make that decision on a case-by-case basis.
Most importantly check out the docs and be sure if you choose to omit or include you understand why you are making that particular decision.
Answered by Joshua Maddox
Solution #5
To add to what @JoshuaMaddox stated, the Document and website structure sub-part of the MDN Learning Area’s “Introduction to HTML” section says (bold/emphasis by me):
Answered by mach128x
Post is based on https://stackoverflow.com/questions/4870955/in-html5-should-the-main-navigation-be-inside-or-outside-the-header-element