22

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.

5 Answers 5

52

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.

9

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.

0
1

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>
2
  • 1
    There is no rule that says <nav> element should be inside or outside of header. Please see the corresponding MDN document: developer.mozilla.org/en-US/docs/Web/HTML/Element/nav
    – oyalhi
    Jun 4, 2019 at 17:39
  • nav is entirely contextual, and it may be placed within any block that makes semantic sense: the entire site, the entire page, or even within an article or section of the page. WhatWG gives examples of nav being using inside of and outside of header blocks.
    – pbarney
    Mar 4, 2022 at 18:08
-4

I have put nav inside header and it works fine

<body>
<header>
<nav>
  [...]
</nav>
[...]
</header>
<main>
[...]
</main>
<footer>
[...]
</footer>
</body>
2
  • So the problem with this is that it gets in the way of the style in my design; the navigation is simply not in the header. I can solve that by adding extra divs for styling, but that seems counter-intuitive when I'm going for a semantic markup. Mar 21, 2014 at 13:48
  • 1
    What is wrong in this markup? Isn't <header> equal to <div role="header">? Nesting a <nav> inside a <header> validates in the W3C HTML Validator.
    – JAT86
    May 5, 2018 at 13:18
-5
<nav> should be declared in this format:\

<header>
<nav>....</nav>
</header>
<main>
<nav>....</nav>

</main>

<footer>....</footer> 

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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