header элемент HTML5 


header элемент HTML5

Опубликовано

Элемент 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>