Should a <nav> tag be outside the <main> tag?

Magnus Lind Oxlund picture Magnus Lind Oxlund · Mar 21, 2014 · Viewed 7.6k times · Source

My question is specifically about semantic HTML5.

In a case where the primary navigation is not part of the header by design, but is still site-wide, should it then be nested within the <main> tag?

The W3C specification states about the <main> tag:

"The main content of the body of a document or application. The main content area consists of content that is directly related to or expands upon the central topic of a document or central functionality of an application."


To me, this would indicate that I should place the <nav> outside <main> like so:

<body>

  <header>
    [...]
  </header>

  <nav>
    [...]
  </nav>

  <main>
    [...]
  </main>

  <footer>
    [...]
  </footer>

</body>


I also get the notion that the <main> tag can be used on level with <header> and <footer> and effectively include everything between those two tags:

<body>

  <header>
    [...]
  </header>

  <main>
    <nav>
      [...]
    </nav>
    [...]
  </main>

  <footer>
    [...]
  </footer>

</body>


Which one is more semantically correct? Does it matter?

All of the most reliable sources on the <main> tag conveniently avoid the issue in their examples by either nesting the primary navigation in the header or making the navigation directly related to the content.

I guess this might bring up how much design should dictate semantic markup?

I'm also interested in whether a sidebar <aside> that is repeated across a website, and is not directly related to the topic of the page, should be nested in the <main> tag, but I image that would be covered by answers to my main question.

Answer

BoltClock picture BoltClock · Mar 21, 2014

The basic idea of the <main> element is that the content within it is considered unique to the document (which lends itself to the entire concept of individual documents within a site).

Since site-wide navigation is supposed to exist across the whole site, it should exist outside of the <main> element.

Likewise for any content that pertains to the site as a whole, rather than being document-specific, such as sidebars.

To be clear, as Kunaal Topraniu mentions, you can place a <nav> within a <main> provided that it consists of navigation that is specific to the <main> content, such as a table of contents. Site-wide navigation, of course, is not content-specific, and therefore does not belong in a <main> element.