Просмотров: 984

Элемент header.

Категории Контекст, в котором может быть использован: Контентная модель:
потоковый контент,
явный контент.
в потоковом контенте. Потоковый контент, но не имеет элементов header и footer в качестве своих потомков.

Выдержки из спецификации:

Элемент header отображает группу вводной и навигационной помощи.

Элемент header обычно используется для того, чтобы содержать в себе заголовочные разделы (h1-h6 элементы или элемент hgroup), но это не обязательное требование. Элемент header может также использоваться для того, чтобы содержать в себе разделы с содержанием, поисковые формы или какие-то подходящие по смыслу логотипы.

Вот несколько примеров использования элемента header:

<header>
 <p>Welcome to...</p>
 <h1>Voidwars!</h1>
</header>

Вот еще один пример:

<header>
 <hgroup>
  <h1>Scalable Vector Graphics (SVG) 1.2</h1>
  <h2>W3C Working Draft 27 October 2004</h2>
 </hgroup>
 <dl>
  <dt>This version:</dt>
  <dd><a href="http://www.w3.org/TR/2004/WD-SVG12-20041027/">http://www.w3.org/TR/2004/WD-SVG12-20041027/</a></dd>
  <dt>Previous version:</dt>
  <dd><a href="http://www.w3.org/TR/2004/WD-SVG12-20040510/">http://www.w3.org/TR/2004/WD-SVG12-20040510/</a></dd>
  <dt>Latest version of SVG 1.2:</dt>
  <dd><a href="http://www.w3.org/TR/SVG12/">http://www.w3.org/TR/SVG12/</a></dd>
  <dt>Latest SVG Recommendation:</dt>
  <dd><a href="http://www.w3.org/TR/SVG/">http://www.w3.org/TR/SVG/</a></dd>
  <dt>Editor:</dt>
  <dd>Dean Jackson, W3C, <a href="mailto:dean@w3.org">dean@w3.org</a></dd>
  <dt>Authors:</dt>
  <dd>See <a href="#authors">Author List</a></dd>
 </dl>
 <p><a href="http://www.w3.org/Consortium/Legal/ipr-notic ...
</header>

Элемент header – это не секционный контент, он не создает новых разделов.

В следующем примере, на странице есть элемент h1 и два подраздела, которые находятся в элементе h2. Контент, после элемента header, все еще является частью предыдущего подраздела, который начинался в элементе header.

<body>
 <header>
  <h1>Little Green Guys With Guns</h1>
  <nav>
   <ul>
    <li><a href="/games">Games</a>
    <li><a href="/forum">Forum</a>
    <li><a href="/download">Download</a>
   </ul>
  </nav>
  <h2>Important News</h2> <!-- this starts a second subsection -->
  <!-- this is part of the subsection entitled "Important News" -->
  <p>To play today's games you will need to update your client.</p>
  <h2>Games</h2> <!-- this starts a third subsection -->
 </header>
 <p>You have three active games:</p>
 <!-- this is still part of the subsection entitled "Games" -->
 ...