Magnus Lind Oxlund Magnus Lind Oxlund - 1 month ago 10
HTML Question

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

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 Source

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.