3

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:

  1. Homepage
    1. Untitled Section (nav)
    2. 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?

  • In case you didn't know, the "Untitled Section" part means you haven't given a heading to that section. – Rob Aug 18 '16 at 2:47
3

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

2

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

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 http://webdesign.tutsplus.com/articles/the-truth-about-multiple-h1-tags-in-the-html5-era--webdesign-16824

0

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.

  • Thank you for your recomendations, but I do not agree with you. As w3c wrote about header element and footer element, those elements can be used for global header and footer with sidewide link. Also, internal sitewide links is common and do not harm SEO. – Fong-Wan Chau Aug 18 '16 at 17:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.