Вы должны взглянуть на алгоритм контура для HTML5 .
Возможно, вы хотите, чтобы заголовок / логотип вашего сайта был h1.
Представьте себе небольшую веб-страницу, состоящую из заголовка страницы (логотип, название сайта, ...), навигации по сайту и записи в блоге (основное содержание этой страницы):
<body>
<!-- not using sectioning elements, for the sake of the example -->
<header>ACME Inc.</header>
<div class="navigation">
<ul>…</ul>
</div>
<div class="content">
<h1>Lorem Ipsum</h1>
<p>…</p>
</div>
</body>
Здесь единственным заголовком является h1 внутри div. Семантически это будет означать, что все содержимое этой страницы входит в объем данного заголовка. Смотрите схему этой страницы:
- Лорем Ипсум
Но это было бы неверно (в семантическом смысле): иерархически заголовок страницы "ACME Inc." не является "частью" записи в блоге. То же самое касается навигации; это навигация по сайту, а не навигация для "Lorem Ipsum".
Поэтому заголовок сайта и навигация по сайту требуют заголовка. Давайте попробуем дать им тоже h1:
<body>
<!-- not using sectioning elements, for the sake of the example -->
<header>
<h1>ACME Inc.</h1>
</header>
<div class="navigation">
<h1>Site navigation</h1>
<ul>…</ul>
</div>
<div class="content">
<h1>Lorem Ipsum</h1>
<p>…</p>
</div>
</body>
Намного лучше! Контур страницы теперь выглядит так:
- ACME Inc.
- Навигация по сайту
- Lorem Ipsum
Но это все еще не идеально: они все на одном уровне, но "ACME Inc." это то, что заставляет все веб-страницы формировать веб-сайт, и в этом вся суть, почему вообще существуют веб-страницы. Навигация и запись в блоге являются частями "ACME Inc.", которая представляет компанию и сам сайт.
Итак, мы должны перейти и изменить заголовки навигации и записи в блоге с h1 на h2:
<body>
<!-- not using sectioning elements, for the sake of the example -->
<header>
<h1>ACME Inc.</h1>
</header>
<div class="navigation">
<h2>Site navigation</h2>
<ul>…</ul>
</div>
<div class="content">
<h2>Lorem Ipsum</h2
<p>…</p>
</div>
</body>
Теперь у нас есть этот план:
- ACME Inc.
- Навигация по сайту
- Лорем Ипсум
И это именно то, что содержание примера веб-страницы означает .
(Кстати, это будет работать и в HTML 4.01.)
Как объяснено в ссылке, HTML5 дает нам элементы секционирования, которые играют важную роль для контура (вместо div, который не влияет на контур). Мы должны использовать их:
<body>
<header>
<h1>ACME Inc.</h1>
</header>
<nav>
<h2>Site navigation</h2>
<ul>…</ul>
</nav>
<article>
<h2>Lorem Ipsum</h2
<p>…</p>
</article>
</body>
Контур остается прежним. Мы могли бы даже изменить h2 (внутри nav и article) обратно на h1, контур тоже останется прежним.
Если вам не нужен «явный» заголовок для навигации, вы можете удалить его: контур остается прежним (теперь с неявным / «неназванным» заголовком для nav). Каждый раздел имеет заголовок, независимо от того, добавляете вы его или нет.
Вы можете даже изменить h1 внутри header на h6, и это не изменит контур. Вы можете думать об этом заголовке как о «заголовке body».
Дополнительные примечания
- Элемент
header в этих примерах не требуется. Я добавил это только потому, что вы упомянули это в своем вопросе.
- Если вы хотите использовать логотип вместо текстового имени («ACME Inc.»), вам все равно следует использовать
h1 и добавить img в качестве дочернего элемента. Тогда значение атрибута alt должно дать имя.
- Заголовок верхнего уровня не должен быть «самым важным или наиболее информативным элементом на странице». Это не то, для чего используются заголовки. Они дают структуру / схему и «маркируют» их объем содержания. В этом примере вы можете предположить, что
article (с заголовком внутри) является наиболее важным содержимым.
- Если вы используете элементы секционирования каждый раз, когда вам это необходимо, вам не нужно
h2… h6 (но вы можете использовать их для ясности или обратной совместимости).
- Вы можете поиграть и протестировать некоторые конструкции разметки с помощью
HTML Outliner: http://gsnedders.html5.org/outliner/ (в нем было несколько нефиксированных ошибок) HTML5 Outliner .