Как правильно использовать h1 в HTML5

Какое из следующего является правильным способом структурирования страницы:

1) h1 только в header

<header>
    <h1>Site title</h1>
    <nav>...</nav>
</header>
<section>
    <h2>Page title</h2>
</section>

Если я использую h1 исключительно внутри header в качестве названия сайта, каждая страница будет иметь тот же контент для тега h1. Это не очень информативно.

2) h1 в header и section для названия сайта и страницы

<header>
    <h1>Site title</h1>
    <nav>...</nav>
</header>
<section>
    <h1>Page title</h1>
</section>

Я также видел примеры использования h1 более одного раза в тегах header и section. Однако, не так ли неправильно иметь два заголовка для одной и той же страницы? В этом примере показаны несколько заголовков и тегов h1 http://orderedlist.com/resources/html-css/structural-tags-in-html5/

3) h1 только в section, подчеркивая заголовок страницы

<header>
    <p>Site title</p>
    <nav>...</nav>
</header>
<section>
    <h1>Page title</h1>
</section>

Наконец, W3, похоже, рекомендует использовать h1 в основном элементе section, означает ли это, что я не должен использовать его в элементе header?

Разделы могут содержать заголовки любого ранга, но авторы сильно рекомендуется использовать либо только элементы h1, либо использовать элементы соответствующий ранг для уровня вложенности раздела.

Ответ 1

Как я заявляю в своем комментарии и цитирую в W3C, h1 - заголовок, а не заголовок. Каждый элемент секционирования может иметь собственный элемент заголовка. Вы не можете думать о том, что h1 является заголовком только страницы, а как заголовок этого конкретного раздела страницы. Как и на первой странице газеты, каждая статья может иметь собственный заголовок (или название).

Вот хорошая статья об этом.

Ответ 2

Я бы рекомендовал использовать 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, a 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 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 in a section within a section.
            (It got demoted twice.)</p>
    </section>
</section>
<h1>another top-level heading</h1>

Кроме того, вы можете использовать элемент <main>. Этот элемент содержит только информацию, специфичную для этой страницы, и не должен включать контент, который повторяется на сайте, например, ссылки на навигацию, верхние и нижние колонтитулы сайта и т.д. В <body> может присутствовать только один элемент <main>. Таким образом, ваше решение может быть таким простым, как это:

<header>
    <h1>Site title</h1>
    <nav>...</nav>
</header>
<main>
    <h1>Page title</h1>
    <p>page content</p>
</main>

Ответ 3

Однако не забывайте о проблемах доступности. Согласно MDN, "в настоящее время нет известных реализаций контура алгоритм в графических браузерах или пользовательских агентах вспомогательных технологий ". Это означает, что программа чтения с экрана не сможет определить относительную важность разделов с помощью <h1>. Для этого может потребоваться больше уровней заголовка, таких как <h2> и <h3>.