Home/ Questions/Q 9044753
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T11:04:08+00:00

I’m confused with using h1-h6 headings and section in html5. Which of these two

  • 0

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)?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0