HTML5 layout with articles, sections and headings

Question

I can't really understand what is the right way of using headings in HTML5. For example, is this code correct:

<body>
<h1>Body Heading H1</h1>
<article>
<h2>Article Heading H2</h2>
  <section>
  <h2>First Section Heading H2</h2>
  </section>
  <section>
  <h2>Second Section Heading H2</h2>
  </section>
</article>
</body>

And can I replace H2 tags with H1 in such cases for both, article and section or only for article?

P.S. I want it to be as SEO optimized as possible as well

Technically valid, but not best practice (the other `
`s are probably better as `
`s). Do not believe anyone who tells you to go all-`
` as that was never supported: http://html5doctor.com/computer-says-no-to-html5-document-outline/ — aardrian, Jun 16 '16 at 20:16

score 0 · Answer 1 · edited May 23 '17 at 11:54

HTML5 allows authors to use h1 everywhere (which is possible if you use sectioning content elements explicitly, like you do), but it encourages authors to use "headings of the appropriate rank for the section's nesting level". See pro/contra.

Following that advice, the headings for the sub-sections inside your article should be h3 instead of h2:

<body>

  <h1>Body Heading</h1>

  <article>

    <h2>Article Heading</h2>

    <section>
      <h3>First Section Heading</h3>
    </section>

    <section>
      <h3>Second Section Heading</h3>
    </section>

  </article>

</body>

Your structure seems to be appropriate. Every section has a heading (h1 for the body sectioning root, h2 for the article section, h3 for the two section sections), which is perfect.

HTML5 layout with articles, sections and headings

`s are probably better as `

`s). Do not believe anyone who tells you to go all-`

` as that was never supported: http://html5doctor.com/computer-says-no-to-html5-document-outline/

1 Answers1