<h1> - Semantic impact vs. SEO impact

Question

There's a lot of debate over the architecture of heading structure in html5. After reading various articles, I've come to three possible architectures that make logical sense to me, but I'm unsure which is the actual proper method of approach. I'll list them below with code examples and hopefully someone can shed some light on the proper balance, or worse/better yet, say the dreaded "You're doing it wrong" and lend a hand.

---

Approach 1: Version A

Single <h1>: Using headings for page specific content only.

This leaves the <h1> as the top-level navigation for the page specific heading while flowing <h2-6> as needed within the content area. While leaving the <header>, <nav>, and <footer> as "untitled" elements.

<header>
  <nav>
    <!-- no headings -->

<div role="main">
  <h1>
  <section>
    <h2>
      <section>
        <h3>

<footer>
  <!-- no headings -->

Approach 1: Version 2

Multiple <h1>'s: Only using headings for page specific content only.

Same as 1A with the addition of multiple, equally important, page content topics. (e.g. possible for blogs or split topic pages)

<header>
  <nav>
    <!-- no headings -->

<div role="main">
  <h1>
  <article>
    <h2>
  <article>
    <h1>

<footer>
  <!-- no headings -->

Approach 1 Outline: Most logical for SEO (my opinion from my research)

• Untitled BODY
  • Untitled NAV
• main heading
  • Section Heading
    • Subsection Heading
  • Untitled SECTION

---

Approach 2:

Multiple <h1>'s: Emphasize outline structure AND content hierarchy

This applies headings to the site-wide elements <header>, <nav>, and <footer> using multiple <h1>'s for non-content oriented elements.

<header>
  <h1>
  <nav>
    <h2>

<div role="main">
  <h1>
  <section>
    <h2>
    <section>
      <h3>

<footer>
  <h1>
  <section>
    <h2>

Approach 2 Outline: Most logical for semantic outline (again, my opinion)

• Header Heading
  • Navigation Heading
• main heading
  • Section Heading
    • Subsection Heading
• Footer Heading
  • Section Heading

---

Approach 3

Single <h1>: Content hierarchy focus; lower level <h1-6> for site-wide elements

This applies headings to the site-wide elements <header>, <nav>, and <footer> WITHOUT using multiple <h1>'s for non-content oriented elements.

<header>
  <h2>
  <nav>
    <h3>

<div role="main">
  <h1>
  <section>
    <h2>
    <section>
      <h3>

<footer>
  <h2>
  <section>
    <h3>

Approach 3 Outline: kinda a hybrid of both approaches

• Header Heading
  • Navigation Heading
• main heading
  • Section Heading
    • Subsection Heading
  • Footer Heading
  • Section Heading

---

So with all that said, how do I make sense of all this? Does any one approach carry more semantic value than the other? Does one make more sense in terms of SEO? Is there a happy balance that can be achieved?

Sources: There were many more, these are those I can remember at the moment

• https://youtu.be/GIn5qJKU8VM
• http://accessiblehtmlheadings.com/
• http://html5doctor.com/outlines/
• http://webdesign.tutsplus.com/articles/the-truth-about-multiple-h1-tags-in-the-html5-era--webdesign-16824

Answer 1

To begin, none of your examples have anything to do with semantics. Your question is based completely on the parser model where the page is read top-to-bottom in the traditional way.

For this reason, your first example is correct. The following examples will fail to give you predictable results and can cause you serious heart-burn.

Please understand that your web page will be looked at conceptually in several ways: one, following the traditional DOM model where HTML and such is evaluated from a user perspective; two, text only with simple mark-up to indicate titles, sub-titles, content, and so on; and three, using a semantic view where really only slight weight is applied to the header tags in the index based upon it's place in the h1-6 hierarchy. From the DOM model, you will get things like the title tag, description meta-tag, and so on that would be missing in the other two views. However, the DOM view does little for weighting your content. It's primary function is to understand your page, where your navigation is, where your header and footers are, where your content begins and ends, etc.

What you really have to pay attention to is the text only and semantic views. The semantic view mostly is derived from the text only view, however, it carries with it various linguistics, psychosemantics, semanitcs, and other analysis of your content.

I will not describe semantics again, but I will point you to an answer I wrote a while ago that is a mini-tutorial on the subject: Why would a website with keyword stuffing rank higher than one without in google search results?

Because the web is based upon the printed page and parsers from the early days followed these traditions and are largely unchanged, it is impossible to escape them. Here is an answer that explains the headline read order which remains the best strategy based upon the parser model: Improve Google ranking for general vs. specific keywords

While I will admit that there could be somewhat of an effect moving header tags around, I ask, Is it a wise thing to do? Hell No! How things are weighted today may not be how they are weighted tomorrow. Following a traditional format assures predictable results where as a simple change in weighting can throw your site into a tail-spin.

Here is a perspective on how this works: Domain name benefit in SEO Ignore the title and skip the very top of the answer and get to the programmers perspective.

If you read these three answers, you can easily understand the effects of the header tag. It is very possible to ruin your page/sites performance getting cute with how you arrange these. Even following tradition, you can undo your title tag and h1 tag extremely quickly by over optimizing a few lower header tags. Careful balance is the key.

Lastly, I will warn you about all this online SEO advice from people who are not engineers. It is a racket to make money and vie for your attention. How search engines work is not a secret. It is out there if you know where to look. Most all SEO experts are not experts at all in that they cannot tell you the internals of how search technology is put together. Short of being an engineer for Google or Bing, we can never really know exactly how these search engines work. Fortunately, Google has told us enough (and really they have told us almost everything we need to know- and no it did not come from a guy named Matt) that if you know the science and the technologies, a fairly reasonable set of assumptions can be made. From my perspective, most SEOs are more wrong than right while a few have a much higher hit rate than average.

Answer 2

The following is from the perspective of the HTML5 specification, based on the assumption that consumers (like search engines) will expect and work with what is specified in the HTML standards. In current practice, such markup details probably don’t matter much for SEO, but it can be important for other consumers and accessibility.

I’ll use headings of the appropriate rank, as this is what HTML5 encourages, but it’s also possible to use h1 everywhere (if you are always using sectioning content elements where appropriate).

---

You can’t "apply" headings to header or footer elements, because they are not sectioning content (they can only contain headings, but this heading would not be restricted to the scope of the header/footer).

Each sectioning content element (section, article, nav, aside) and each sectioning root element (body, blockquote, etc.) can have an heading applied.

These sectioning content/root elements and the heading elements h1-h6 are the only elements that matter for the document outline.

While every section "longs" for an heading, it is not required to provide one (in such a case, it gets an "implied", untitled heading). While it’s often useful to provide one, there are cases where it’s not really necessary. For example, if you only have one navigation, having a nav without a heading would be sufficient. But if you site would have multiple navigations, it might make sense to use headings that explain the different purposes.

In your approach 1, the body is such an untitled section (but this is only the case because your nav appears before the first heading element; otherwise this h1 would be the heading for the whole document).
I don’t think that having an untitled body section is a good choice. It’s the first entry in the outline, and, ideally (but not necessarily), everything that follows is in scope of this entry.

For a typical website that has a global navigation, it makes sense (longer explanation) to use the site name for the body section’s heading, because the global navigation belongs to the whole site, not just to the current document:

<body>
  <h1>My site</h1> <!-- site name -->

  <nav></nav> <!-- site navigation -->

</body>

<!-- Outline:
  1. "My site"
    1.1 Untitled nav
-->

The main content for this document should also be in scope of the site heading, as the site is the context of this document’s main content, i.e., it’s part of your site:

<body>
  <h1>My site</h1> <!-- site name -->

  <nav></nav> <!-- site navigation -->

  <article> <!-- document content -->
    <h2>My blog post</h2>
  </article>

</body>

<!-- Outline:
  1. "My site"
    1.1 Untitled nav
    1.2 "My blog post"
-->

If you have multiple sections of main content, for example, a list of blog posts, it often makes sense to use a section that contains all these article, instead of having the article as direct childs of the body:

<body>
  <h1>My site</h1> <!-- site name -->

  <nav></nav> <!-- site navigation -->

  <section> <!-- document content -->
    <h2>Recent blog posts</h2>

    <article>
      <h3>My blog post</h3>
    </article>

    <article>
      <h3>Another blog post</h3>
    </article>

  </section>

</body>

<!-- Outline:
  1. "My site"
    1.1 Untitled nav
    1.2 "Recent blog posts"
      1.2.1 "My blog post"
      1.2.2 "Another blog post"
-->

If you have a site-wide footer that is so complex that it needs sectioning elements, it should be again on the same level like the nav and the main content (as it belongs to the site, not the main content):

<body>
  <h1>My site</h1> <!-- site name -->

  <nav></nav> <!-- site navigation -->

  <section> <!-- main content -->
    <h2>Recent blog posts</h2>

    <article>
      <h3>My blog post</h3>
    </article>

    <article>
      <h3>Another blog post</h3>
    </article>

  </section>

  <section> <!-- site footer -->
    <!-- this section should be the child of a 'footer' element -->
  </section>

</body>

<!-- Outline:
  1. "My site"
    1.1 Untitled nav
    1.2 "Recent blog posts"
      1.2.1 "My blog post"
      1.2.2 "Another blog post"
    1.3. Untitled section
-->

(In all these examples the navigation comes before the main content, but it often makes sense to have the main content first. Swapping these is possible. You should only make sure that the h1 with the site name comes before any other sections/headings.)