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

The issue with standards is that many people are still doing it wrong and don't really respect the standards. Even at school they are still telling us that nav needs to be in the header. What is really a shame is that this new generation still applies their work incorrectly. This is how I'm doing it so far.

<html>

<head></head>

<body>
  <!-- HEADER -->
  <header>
    <div class="banner" role="banner"></div>
  </header>
  
  <!-- NAV -->
  <nav>
    <div class="brand"></div>
    <div class="menu" role="menu"></div>
  </nav>
  
  <!-- CONTENT -->
  <main>
    <section class="container"></section>
    <section class="container"></section>
    <section class="container"></section>
  </main>
  
  <!-- FOOTER -->
  <footer>
    <div class="copyright"></div>
  </footer>
  
</body>

</html>

I'm sure you've long solved this issue by now, but I thought I'd clarify anyway.

As the <main> element is supposed to be used for the main, unique content of your site, your <nav> should not be inside it if it is navigation for your entire site. You CAN, however, put a <nav> inside your <main> if, for example, you have page content or content-related navigation, e.g. anchors for sections of your content.

However, if you are using <nav> for your main, site-wide navigation, and it doesn't belong in your header--for example, if you're using sidebar navigation--I would do something like this:

<header>
     <!-- header stuff -->
</header>

<div id="mainPanel"> <!--(or whatever)-->
     <nav>
          <!--your nav-->
     </nav>
     <main>
          <!--main content-->
     </main>
</div>

And that would be perfectly semantically correct. Since what (I think) you want to do is to position your navigation somewhere, and not really change what you mean by navigation and main content, a div is actually the correct usage, since divs don't carry semantics.

Edit: I should add that I conditionally disagree with some of the responses that prescriptively claim that nav should be in header. As header is not considered sectioning content per W3C, this is not only often unnecessary but would be flatly incorrect in some website models.


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.

Tags:

Html

Semantic Markup

Recent Posts