Я бы рекомендовал использовать h1 во всем.Забудьте о h2 - h6.
. В HTML4 6 уровней заголовков использовались для неявного определения разделов.Например,
<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>
Теперь с элементом section вы можете явно определять разделы, а не полагаться на неявные разделы, созданные вашим браузером, которые читают разные уровни заголовков.Браузер, снабженный HTML5, знает, что все, что находится внутри элемента section, «понижается» на один уровень в схеме документа.Так, например, section > h1 семантически рассматривается как h2, section > section > h1 подобен h3 и т. Д.
Что сбивает с толку, так это то, что браузеры STILL создают неявные разделына основе уровней заголовков h2 - h6, но элементы h2 - h6 не меняют своих стилей.Это означает, что h2, независимо от того, во сколько разделов он вложен, все равно будет выглядеть как h2 (по крайней мере, в Webkit).Это может сбить с толку, если ваш h2 должен быть, скажем, заголовком уровня 4.
Смешивание h2 - h6 с section приводит к очень неожиданным результатам.Просто придерживайтесь только h1 и используйте section для создания явных разделов.
<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>
Кроме того , вы можете использовать элемент <main> .Этот элемент содержит только информацию, специфичную для данной страницы, и не должен включать в себя контент, повторяющийся по всему сайту, такой как навигационные ссылки, верхние и нижние колонтитулы сайта и т. Д. Может присутствовать только один <main> присутствующий элементв <body>.Таким образом, ваше решение может быть таким простым:
<header>
<h1>Site title</h1>
<nav>...</nav>
</header>
<main>
<h1>Page title</h1>
<p>page content</p>
</main>