Для типичного сайта, например блог, h1 должен содержать заголовок сайта. Да, на каждой странице сайта.
Почему? На веб-сайте есть различные части, которые являются общими для всех его веб-страниц. Давайте возьмем навигацию в качестве примера:
<ul id="site-navigation">
<li><a href="/">Home</a></li>
<li><a href="/about">About me</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
Это #site-navigation повторяется на каждой странице сайта. Он представляет собой навигацию по сайту, а не навигацию по страницам. Разница важна! {Навигация по странице может быть оглавлением (как в статье в Википедии) или нумерацией страниц для длинной статьи.}
Если вы используете заголовок статьи в качестве h1, навигация по сайту будет охватываться этим заголовком.
<body>
<div>John’s blog</div> <!-- the site title -->
<h1>My first blog post</h1> <!-- the article title -->
<p>…</p>
<h2>Navigation</h2>
<ul id="site-navigation">…</ul> <!-- the site-wide navigation -->
</body>
Итак, эта разметка передает: навигация (→ начатая h2) является частью статьи (→ начатая h1). Но это не так, эта навигация не является навигацией для статьи. Ссылки действительно являются частью всего сайта, и сайт представлен заголовком сайта.
Проблема становится понятнее, если статья также содержит подзаголовки:
<body>
<div>John’s blog</div> <!-- the site title -->
<h1>My first blog post</h1> <!-- the article title -->
<p>…</p>
<h2>Why I’m blogging</h2>
<p>…</p>
<h2>Why you should read my blog</h2>
<p>…</p>
<h2>Navigation</h2>
<ul id="site-navigation">…</ul> <!-- the site-wide navigation -->
</body>
Как видите, нет способа отличить подзаголовки статьи от навигации. Похоже, статья имеет три подзаголовка: «Почему я веду блог», «Почему вы должны читать мой блог» и «Навигация».
Поэтому, если вместо этого мы используем h1 для заголовка сайта и h2 для заголовка статьи, навигация может быть в пределах заголовка сайта, также используя h2:
<body>
<h1>John’s blog</h1> <!-- the site title -->
<h2>My first blog post</h2> <!-- the article title -->
<p>…</p>
<h2>Navigation</h2>
<ul id="site-navigation">…</ul> <!-- the site-wide navigation -->
</body>
Теперь эта разметка передает: есть сайт под названием «Блог Джона» (→ запущенный h1), и он содержит статью (→ запущенную первым h2) и навигацию по сайту (→ запущенную второй h2). Подзаголовки статьи теперь, конечно, будут h3.
Другая проблема, связанная с использованием h1 для заголовка статьи, заключается в том, что обычно существует заголовок перед первым заголовком, например, заголовок сайта, включая заголовок сайта и прочее. Для пользователей, которые перемещаются по заголовкам, этот первый контент будет «невидимым». Поэтому рекомендуется назначать каждому отдельному блоку собственный заголовок.
HTML5 формализует это с помощью алгоритма секционирования / выделения . Он решает многие проблемы с изложением, которые у вас могли возникнуть с HTML 4.01, потому что порядок содержимого теперь может быть (в основном) свободным, и вам не нужно «придумывать» реальные заголовки, если вы этого не хотите, благодаря section / article / nav / aside. Но также в HTML5 заголовок сайта должен быть h1, который является дочерним по отношению к body, но не дочерним по отношению к любому элементу секционирования / корню. Все остальные разделы находятся в области заголовка этого сайта.