Search code examples
htmlseosemantic-markuphtml-heading

How to use h1 to h6 within header, section, article, etc.. in html5?


In xhtml 1.0 hn (h1 to h6) must represent document structure, like chapters in a book, and they all descend from the body. In html5 there are section, article, header, hgroup, and it seems that hn tags descend from one of these tags, and then are not relative to the body element. like

<html>
<body>
<h1>My personal homepage</h1>
<section id="resume">
<header>
<h1>My resumre</h1>
<p>A brief description of my skills</p>
</header>
<!-- bla bla bla -->
</section>
</body>

In xhtml 1.0 I would have done:

<html>
<body>
<h1>My personal homepage</h1>
<div id="resume">
<h2>My resumre</h2>
<p>A brief description of my skills</p>
<!-- bla bla bla -->
</div>
</body>

Does it make sense? Or should I follow the same rules as in xhtml 1.0 and disregard section, header, etc... and make hn tags relative to the body elements?

Advises and answers concerning semantics and SEO are the most valuable for me.


Solution

  • The best SEO is to have good content, simple as that! Semantically what you have illustrated here is fine. What is new in HTML5 is that containers like <footer>, <header>, <section> and <article> have their own internal structure, as it were. So the outline of your first example would be:

    1. My personal homepage
      1.  My resume

    If you were to change the markup to this:

    <html>
      <body>
        <h1>My personal homepage</h1>
        <h2>Introduction</h2>
        <p id="intro">...</p>
        <h2>About me</h2>
        <section id="resume">
          <header>
            <h1>My resume</h1>
            <h2>Overview</h2>
          </header>
          <p>...</p>
        </section>
      </body>
    </html>
    

    The outline would be:

    1. My personal homepage
      1.  Introduction
      2.  About me
          1.  My resume
              1.  Overview

    See section 4.4.11 of the draft for an explanation. Geoffrey Sneddon has made the HTML 5 Outliner tool for checking the outline of a page.