Вам следует взглянуть на алгоритм структуры для 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.» это то, что заставляет все веб-страницы формировать веб-сайт, в этом весь смысл, почему веб-страницы вообще существуют. Навигация и запись в блоге являются частью 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.
- Site navigation
- Лорем Ипсум
И это именно то, что содержание примера веб-страницы означает. (Кстати, это будет работать и в 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.
person
unor
schedule
11.08.2012
