I would recommend using h1
throughout. Forget about h2
through h6
.
Back in HTML4, the 6 heading levels were used to implicitly define the sections. For example,
<body>
<h1>This is a top-level heading</h1>
<p>some content here</p>
<h2>This is the heading of a subsection</h2>
<p>content in the subsection</p>
<h2>Another subsection begins here</h2>
<p>content</p>
<h1>another top-level heading</h1>
Now with the section
element, you can explicitly define the sections rather than having to rely on the implicit sections created by your browser reading the different heading levels. A browser equipped with HTML5 knows that everything inside a section
element gets "demoted" by one level in the doc outline. So for example a section > h1
is semantically treated like an h2
, a section > section > h1
is like an h3
, etc.
What's confusing is that browsers STILL create implicit sections based on the h2
–h6
heading levels, yet the h2
–h6
elements don't change their styles. That means that an h2
, no matter how many sections it is nested in, will still appear like an h2
(at least in Webkit). This would be confusing if your h2
was supposed to be, say, a level-4 heading.
Mixing h2
–h6
with section
leads to very unexpected results. Just stick with h1
only, and use section
to create explicit sections.
<body>
<!-- optional --><header>
<h1>This is a top-level heading</h1>
<p>you may optionally wrap this p and the h1 above it inside a header element.
the header element doesn't affect the doc outline.
the section element does, however.</p>
<!-- optional --></header>
<section>
<h1>even though this is an h1, the browser "treats it" like an h2
because it's inside an explicit section.
(it got demoted).</h1>
<p>content in the subsection</p>
</section>
<section>
<h1>Another subsection begins here, also treated like an h2</h1>
<p>content</p>
<h2>This is misleading. it is semantically treated like an h3.</h2>
<p>that is because after an h1, an h2 is demoted one level. the h1 above is
already a "level 2" heading, so this h2 becomes a "level 3" heading.</p>
<section>
<h1>just do this instead.</h1>
<p>it is treated like an h3 because it's in a section within a section.
(It got demoted twice.)</p>
</section>
</section>
<h1>another top-level heading</h1>
Furthermore, you may use the <main>
element. This element contains only information specific to the page, and should not include content that is repeated site-wide, such as navigation links, site headers/footers, etc. There may be only one <main>
element present in the <body>
. So your solution may be as simple as this:
<header>
<h1>Site title</h1>
<nav>...</nav>
</header>
<main>
<h1>Page title</h1>
<p>page content</p>
</main>