The outline of your example
The outline which https://gsnedders.html5.org/outliner/ generated is not correct.
The correct outline of your example markup is:
1. Document (<body> without heading)
1.1. Navigation (<nav> without heading)
2. "Homepage" (implicit section opened by <h1>)
2.1. Navigation (<nav> without heading)
I recommend the "HTML5 Outliner" for checking your outline, or the W3C validator (check "outline").
(See https://github.com/hoyois/html5outliner/issues/7 for details why the outline you quoted is not correct.)
Site-related vs. page-related content
Your observation is correct: mixing page-related sections and site-related sections can be problematic. But exactly because of this, the advice that the main content should get a h1 is not a good advice if you care about the outline.
A page from a typical website has site-wide parts like the header, the navigation, and the footer. To get them in scope of a heading, you should use the heading for the body sectioning root, which then represents the site.
<body>
<header>
<h1>Example Site</h1> <!-- could be your logo’s 'alt' -->
</header>
<main>
</main>
<footer>
</footer>
</body>
Now the Document has a heading ("Example Site"), and unless you add another h1 to the body sectioning root, this will be the only top-level entry in the outline -- everything else will be in its scope.
Now we can add a nav (for the site-wide navigation):
<header>
<h1>Example Site</h1> <!-- could be your logo’s 'alt' -->
<nav></nav>
</header>
(It’s important that the nav, or any other section, comes after the body-heading.)
And an article (if the main content of that page is e.g. a blog posting):
<main>
<article></article>
</main>
The article heading could be a h1, but HTML5 recommends to use heading elements of the corresponding rank (depending on your use of sectioning elements), i.e., h2 in this case.
<main>
<article>
<h2>Example Article</h2>
</article>
</main>
Result
This gives:
<body>
<header>
<h1>Example Site</h1> <!-- could be your logo’s 'alt' -->
<nav></nav>
</header>
<main>
<article>
<h2>Example Article</h2>
</article>
</main>
<footer>
</footer>
</body>
and the outline is
1. "Example Site"
1.1. Navigation (<nav> without heading)
2.2. "Example Article"
What would be the alternative?
If you are not convinced that the site name should be the document heading (i.e., the h1 for the body), note that HTML5 encourages authors to use sectioning content elements (article, aside, nav, section) explicitly.
If you use article for (e.g.) a blog posting, as a child of body, you have a second-leveld outline entry by definition. You can only achieve a top-level entry if you don’t follow the recommendation (i.e., you don’t use article).
If you have a site-wide navigation in nav, this would be in scope of this top-level entry (if it comes after the blog posting), or in scope of an untitled document heading (if it comes before the blog posting). The first variant is wrong (the site-wide navigation has nothing to do with the blog posting), the second one is not ideal, because you have multiple top-level entries, and the first one has no label.
If you would stop using nav, your navigation would still be in scope of a heading. It would either be part of the unlabeled document entry, or part of the main content. Both is, of course, not ideal.
So, my advice based on the HTML5 W3C Recommendation:
- Use a
h1 (for the body sectioning root) with your site name/logo.
- Use
nav for your navigation (site-wide as well as page-wide), use article/section for your content.
- Give each
article/section one heading element (starting with h2).
