Can someone explain the correct usage of the h1 tag?

Question

In html4 headings are what create structure, however in html5 structuring elements do, but this algorithm isn't supported yet, so the html4 way of creating structure is used currently. This is leading to some conflicting nuanced information on the h1, I'm hoping to get cleared up. From my understanding in html4 there should only be one h1 tag and it should represent the title tag of the page. However I have also heard you can have multiple h1 tags in html5 because they represent the structuring element, similar to how you can have multiple headers and footers on a page, is this true? If so when html5 structuring is supported does this mean html4 style heading structuring is no longer valid?

  <section>
      <article>
          <header><h1>cats</h1></header>
      </article>
      <article>
          <header><h1>dogs</h1></header>
      </article>
  </section>

Answer 1

Semantically, <h1> has always just meant the top level heading of a section.

---

Think about a blog post. You should use <h1> as the title of the post, and then every heading inside of the post should be a sub-heading.

But, you can still have multiple posts on the same page (i.e. an infinite-scroll website).

This is what your HTML5 code is defining. Just two articles on the one page. You have always been able to do this, and it is valid in both HTML5 and HTML4. There has never been a semantic restriction to the amount of <h1> tags you can have, as long as you use them correctly:

• They should always represent the top-level heading of an article;
• Don't nest <h1> tags;
• Don't use them to define sections of content within an article that has a heading.

Answer 2

HTML4, having single h1 tag was typically used for structure. This is no longer true with HTML5. The structure is now Nav, Section, Article, Aside which means that within each root such as Nav or Section or Article or aside each of those may have a H1 element. Of course web crawlers that see multiple H1 tags within each root(nav, section, article, aside) may work against your SEO and may stylistically degrade your web page impact on the viewer/reader.