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.
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.