: Should we use for global navigation since it is sectioning content? Background In term of SEO, <h1> should be used as page specific content only and we should avoid to use it for site
Background
In term of SEO, <h1> should be used as page specific content only and we should avoid to use it for site logotype. So, a current homepage structure should be something like:
<body>
<header>
<p><img id="logo">
<nav>
<ul></ul>
</nav>
</header>
<main>
<h1>Homepage</h1>
<!-- Content -->
</main>
<footer>
<nav>
<ul></ul>
</nav>
<p>Copyright
</footer>
But the above code gave this outline in HTML5 outliner:
Homepage
Untitled Section (nav)
Untitled Section (nav)
The problem
Since <nav> is sectioning content, should we avoid the use of that for global navigation because logically it is not in-page navigation?
More posts by @Merenda212
4 Comments
Sorted by latest first Latest Oldest Best
It depends on whether the website you're building is a SPA or entirely server side. You could use the for a SPA as it wouldn't need to be reloaded when you access main/sub sections. I think Google's webcrawler is build to prioritise the second only to content. See webdesign.tutsplus.com/articles/the-truth-about-multiple-h1-tags-in-the-html5-era--webdesign-16824
The outline of your example
The outline which 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 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).
Why did you use <h1> in your home page? Header tags should be used for important text headlines in your page.
For footer you can have a different navigation like linking to other pages such as Facebook page, YouTube channel and any other pages that your viewers will find it useful.
Just don't put the same navigation on your header because you are literally repeating the navigation which can harm you via sitewide links.
In html5 the nav element should be used to represent a section of a page that links to
other pages or
to parts within the page
So depending what kind of links you are specifying in the footer section you might avoid inserting them within a nav element:
Not all groups of links on a page need to be in a nav element — the
element is primarily intended for sections that consist of major
navigation blocks. In particular, it is common for footers to have a
short list of links to various pages of a site, such as the terms of
service, the home page, and a copyright page. The footer element alone
is sufficient for such cases; while a nav element can be used in such
cases, it is usually unnecessary
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.