Is there any purpose for h2-h6 headings in HTML5?

StackOverflow https://stackoverflow.com/questions/14030310

  •  12-12-2021
  •  | 
  •  

Question

I'm confused with using h1-h6 headings and section in html5. Which of these two examples is correct?

<body>
  <article>
    <header>
      <h1>Article heading</h1>
      <p><time>0/0/00</time></p>
      <div id="article-tags"></div>
    </header>
    <section>
      <h2>Introduction</h2>
      <p> ... text ... </p>
    </section>
    <section>
      <h2>The problem itself</h2>
      <p> ... text ... </p>
    </section>
  </article>
</body>

This seems natural to me, separate article into sections and give them headings according to whole article heading hierarchy, but

<body>
  <article>
    <header>
      <h1>Article heading</h1>
      <p><time>0/0/00</time></p>
      <div id="article-tags"></div>
    </header>
    <section>
      <h1>Introduction</h1>
      <p> ... text ... </p>
    </section>
    <section>
      <h1>The problem itself</h1>
      <p> ... text ... </p>
    </section>
  </article>
</body>

I've seen this used lot of time and read that every section should have it's own heading hierarchy.

If the second example is the right one, what is the purpose of having headings from h2 to h6? If every h2 can be separated in new section and should have it's own heading hierarchy starting with h1 again, should there ever be used lower headings than h1 (because they all can have it's own section with heading)?

Was it helpful?

Solution

The HTML 5 spec says:

Sections may contain headings of any rank, but authors are strongly encouraged to either use only h1 elements, or to use elements of the appropriate rank for the section's nesting level.

Authors are also encouraged to explicitly wrap sections in elements of sectioning content, instead of relying on the implicit sections generated by having multiple headings in one element of sectioning content.

http://www.w3.org/TR/2011/WD-html5-author-20110809/headings-and-sections.html#headings-and-sections

So I think both your examples are fine:

  • In your first example, each <section> has an <h2> tag for its heading, which is appropriate as each section is nested at the second level within the article.
  • In your second example, each <section> uses an <h1> tag, which is appropriate as the <section> tag is sectioning content.

And in both cases, you’ve explicitly wrapped the article sections in a <section> tag.

I think <h2>-<h6> are kept around for backwards-compatibility and flexibility. Allowing HTML4-style sectioning with <h2>-<h6> means that existing HTML4 content doesn’t have to be altered to fit in with HTML5’s sectioning rules. It also means that if, for whatever reason, in a given situation it’s more optimal to use old-style sectioning, then authors can.

HTML is intended for worldwide general-purpose use. A bit of flexibility really helps with that.

OTHER TIPS

According to Paul D. Waite comment with link to specification,

Both versions are right, the second example is only easier to maintain if you move your sections often, so you do not need to edit the headings.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top