Какое из следующего является правильным способом структурирования страницы:
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, либо использовать элементы соответствующий ранг для уровня вложенности раздела.
Как я заявляю в своем комментарии и цитирую в W3C, h1 - заголовок, а не заголовок. Каждый элемент секционирования может иметь собственный элемент заголовка. Вы не можете думать о том, что h1 является заголовком только страницы, а как заголовок этого конкретного раздела страницы. Как и на первой странице газеты, каждая статья может иметь собственный заголовок (или название).
Я бы рекомендовал использовать 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>
Однако не забывайте о проблемах доступности. Согласно MDN, "в настоящее время нет известных реализаций контура алгоритм в графических браузерах или пользовательских агентах вспомогательных технологий ". Это означает, что программа чтения с экрана не сможет определить относительную важность разделов с помощью <h1>. Для этого может потребоваться больше уровней заголовка, таких как <h2> и <h3>.