Should a
tag be outside the
tag?

Question

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.

BoltClock · Accepted Answer

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.

Jens Ingels · Answer

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>

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

Tags:

html

semantic-markup

Magnus Lind Oxlund

2 Answers

BoltClock

Jens Ingels

Recent Activity

Donate For Us