180

In HTML5, I know that <nav> can be used either inside or outside the page's masthead <header> element. For websites having both secondary and main navigation, it seems common to include the secondary navigation as a <nav> element inside the masthead <header> element with the main navigation as a <nav> element outside the masthead <header> element. However, if the website lacks secondary navigation, it appears common to include the main navigation in a <nav> element within the masthead <header> element.

If I follow these examples, my content structure will be based on the inclusion or exclusion of secondary navigation. This introduces a coupling between the content and the style that feels unnecessary and unnatural.

Is there a better way so that I'm not moving the main navigation from inside to outside the masthead <header> element based on the inclusion or exclusion of secondary navigation?

Main and Secondary Navigation Example

<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 site that follows the above pattern.

enter image description here

Main Only Navigation Example

<header>
    <h1>Website Title</h1>
    <nav>
        <!-- Main Navigation inside <header> -->
        <ul>
            <li></li>
        </ul>
    </nav>
</header>

Keyzo.co.uk is an example site that follows the above pattern.

enter image description here

Excerpts from Introducing HTML5 — Added on 02-Feb-11, 7:38 AM

Introducing HTML5 by Bruce Lawson and Remy Sharp has this to say about the subject:

The header can also contain navigation. This can be very useful for site-wide navigation, especially on template-driven sites where the whole of the <header> element could come from a template file.

Of course, it's not required that the <nav> be in the <header>.

If depends largely on whether you believe the site-wide navigation belongs in the site-wide header and also pragmatic considerations about ease of styling.

Based on that last sentence, it appears that Bruce Lawson—author of the chapter those excerpts are from—admits that "pragmatic considerations about ease of styling" yield a coupling between the content and the style.

Improve this question
  • 1
    It depends entirely on your website's design. Take twitter for example, their Homepage (the page you see before you've logged-in), has no top navigation. All their "main menu" stuff is at the bottom of the page. Now, I don't know about you - but I wouldn't go calling that a header... – uSeRnAmEhAhAhAhAhA Mar 18 '14 at 15:47
91

It's completely up to you. You can either put them in the header or not, as long as the elements within them are internal navigation elements only (i.e. don't link to external sites such as a twitter or facebook account) then it's fine.

They tend to get placed in a header simply because that's where navigation often goes, but it's not set in stone.

You can read more about it at HTML5 Doctor.

Improve this answer
  • 5
    Why do you state that "as long as the elements within them are internal navigation elements only (i.e. don't link to external sites such as a twitter or facebook account) then it's fine."? – Matthew Rankin Feb 2 '11 at 13:22
  • 7
    @Matthew because the nav element is for navigation around that site only. I was just being clear is all. – Ian Devlin Feb 2 '11 at 16:54
  • @MatthewRankin What a shock it would be to click on an anchor inside of a <nav> element, only to be sent to a new page with entirely different navigation. For anchors to external sites with no true relationship to your own, also remember the rel="nofollow" attribute for links. – Anthony Rutledge Oct 13 '18 at 14:29
  • I know this is old... What about links to subdomains? For example a website that has different sites (presentation site, service site, auth site, etc...), they all have different structure. What I'm doing is placing that link inside the <nav> element but not inside the <ul> element, styling it in a way that's not part of the main navigation list. With the exception being the mobile version, the link has to appear in the same list... Anyways the button is descriptive enough to know you're going somewhere else... – Chazy Chaz Nov 12 '19 at 17:42
5

It's a little unclear whether you're asking for opinions, eg. "it's common to do xxx" or an actual rule, so I'm going to lean in the direction of rules.

The examples you cite seem based upon the examples in the spec for the nav element. Remember that the spec keeps getting tweaked and the rules are sometimes convoluted, so I'd venture many people might tend to just do what's given rather than interpret. You're showing two separate examples with different behavior, so there's only so much you can read into it. Do either of those sites also have the opposing sub/nav situation, and if so how do they handle it?

Most importantly, though, there's nothing in the spec saying either is the way to do it. One of the goals with HTML5 was to be very clear[this for comparison] about semantics, requirements, etc. so the omission is worth noting. As far as I can see, the examples are independent of each other and equally valid within their own context of layout requirements, etc.

Having the nav's source position be conditional is kind of silly(another red flag). Just pick a method and go with it.

Improve this answer
4

I do not like putting the nav in the header. My reasoning is:

Logic

The header contains introductory information about the document. The nav is a menu that links to other documents. To my mind this means that the content of the nav belongs to the site rather than the document. An exception would be if the NAV held forward links.

Accessibility

I like to put menus at the end of the source code rather than the start. 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.

Improve this answer
  • 2
    keep in mind that skip links give the OPTION to skip the menu, while putting at the end doesn't give the option of not skipping (i.e. navigating) - thus you'd be forced to wait until the end to be able to navigate properly, right? – Julix Sep 10 '18 at 5:22
  • 2
    To continue on @julix's point, placing the nav at the end, but rendering it at the beginning will make it awkward for sighted users tabbing through the document. – Jason T Featheringham Jan 8 '19 at 6:20
  • <nav> is a semantic element, meaning that its purpose is defined by it's contextual placement. You can have one <nav> for the site navigation and another <nav> for the page navigation. It doesn't have to be only for site navigation. – pbarney Sep 1 '20 at 12:59
3

@IanDevlin is correct. MDN's rules say the following:

"The HTML Header Element "" defines a page header — typically containing the logo and name of the site and possibly a horizontal menu..."

The word "possibly" there is key. It goes on to say that the header doesn't necessarily need to be a site header. For instance you could include a "header" on a pop-up modal or on other modular parts of the document where there is a header and it would be helpful for a user on a screen reader to know about it.

It terms of the implicit use of NAV you can use it anywhere there is grouped site navigation, although it's usually omitted from the "footer" section for mini-navs / important site links.

Really it comes down to personal / team choice. Decide what you and your team feel is more semantic and more important and the try to be consistent. For me, if the nav is inline with the logo and the main site's "h1" then it makes sense to put it in the "header" but if you have a different design choice then decide 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.

Improve this answer
3

To expand on what @JoshuaMaddox said, in the MDN Learning Area, under the "Introduction to HTML" section, the Document and website structure sub-section says (bold/emphasis is by me):

Header

Usually a big strip across the top with a big heading and/or logo. This is where the main common information about a website usually stays from one webpage to another.

Navigation bar

Links to the site's main sections; usually represented by menu buttons, links, or tabs. Like the header, this content usually remains consistent from one webpage to another — having an inconsistent navigation on your website will just lead to confused, frustrated users. Many web designers consider the navigation bar to be part of the header rather than a individual component, but that's not a requirement; in fact some also argue that having the two separate is better for accessibility, as screen readers can read the two features better if they are separate.

Improve this answer
  • 1
    I want to agree that a <nav> that is structured shallow in a page may be more accessible than a <nav> that is nested deeper. However, on what basis is that judgement being made? Screen readers are going to home in on <nav> and <a> tags, anyway. The important factor is the structural order of the HTML. Next up, responsiveness. Does making the primary <nav> (or any <nav>) a direct child of <body> make it easier to manipulate? Is that valid HTML? A <nav> is sectioning content, and thus is a natural fit to live within a sectioning root, like <body>. See W3C HTML5 – Anthony Rutledge Oct 13 '18 at 15:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.