Элемент header также как остальные элементы (main, article, side, nav и т.д.)
входящие в HTML5, интересное нововведение в плане
верстки документа. Их использование превращает вашу веб-страницу в семантически организованную систему, помогая поисковым машинам детально распознать контент документа.
Название элемента
header уже подсказывает, что предназначен он для предоставления вводной информации:
заголовки h1-h6;
логотип img;
навигационная панель nav;
список определений dl;
Header как элемент представления реквизитных данных о странице
На большинстве вебстраниц
header является первым элементом в структуре документа, своеобразная его шапка, и несет информацию, дающую краткое представление о ресурсе: название сайта, его девиз, логотип, панель навигации и т.д.
Листинг 1. Очень простой header, включающий только заголовок, и приветствие
<header>
<h1>Название блога</h1>
<p>Добро пожаловать</p>
</header>
Листинг 2. Усложним заголовок, добавив туда логотип, навигационную панель и девиз, обратите внимание, если вы используете несколько заголовков, то рекомендуется заключать их в элемент hgroup
<header>
<img src="logo.png" />
<hgroup>
<h1>Название блога</h1>
<h2>Девиз</h2>
</hgroup>
<nav>
<ul>
<li>Домашняя страница</li>
<li>Архив статей</li>
<li>О сайте</li>
</ul>
</nav>
</header>
Header как составная часть другого элемента
Конечно же,
header не ограничивается применением только в качестве шапки документа, он может входить в состав других структурных элементов. Ярким примером является, использование его как вступительную часть к статье, он может предоставлять читателю: название статьи, дату публикации, автора публикации и другие данные.
Листинг 3. Употребление header в составе других элементов
<article>
<header>
<h1>Название статьи</h1>
<p>Опубликовано <time>Дата публикации</time></p>
</header>
<p>
Текст статьи.
</p>
</article>
Листинг 4. Однако не стоит злоупотреблять элементом header, в следующем примере он избыточен
<article>
<header>
<h1>Название статьи</h1>
</header>
<p>
Текст статьи.
</p>
</article>
Листинг 5. Так гораздо лучше.
<article>
<h1>Название статьи</h1>
<p>
Текст статьи.
</p>
</article>
Где не должно быть элемента header
Как указано в спецификации header не может быть дочерним элементом следующих тегов:
footer
address
header
Использование div внутри header
Если вам недостаточно текущих элементов чтобы оформить header (например, выронить название по левому краю, меню по правому, а логотип поместить по центру), то воспользуйтесь div блоком, однако он не должен нести семантический смысл.
Листинг 6. div используется исключительно для позиционирования данных на странице
<header>
<div class="left">
<a href="/">
<img src="logo.png" />
<hgroup>
<h1>Название блога</h1>
<h2>Девиз</h2>
</hgroup>
</a>
</div>
<nav>
<ul>
<li>Домашняя страница</li>
<li>Архив статей</li>
<li>О сайте</li>
</ul>
</nav>
</header>