ヘッダーを表す

header

< header 【ヘッダー 】 >〜</header >

header要素は文書やセクションのヘッダーを表します。文書やセクションの冒頭となる見出しや概要、ナビゲーションのリンクなどを記述する場合によく利用されます。トップページのヘッダーとする場合は、Webサイトのロゴや検索フォーム、メインのナビゲーションメニューなどを含みます。

カテゴリー ・パルパブルコンテンツ
・フローコンテンツ
コンテンツモデル フローコンテンツ。header要素、またはfooter要素を子孫要素に持つことは不可
使用できる文脈 フローコンテンツが期待される場所
カテゴリーとコンテンツモデル

使用できる属性

グローバル属性

すべての要素で使用できる属性です。
グローバル属性とイベントハンドラ属性

サンプルコード

<article>
  <header>
    <h1>カフェラテとカプチーノの違い</h1>
    <p><time datetime="2015-04-03T10:30:42+09:00">公開日：2015年04月03日</time></p>
  </header>
  <!-- 本文以下は省略 -->
</article>

使用例ヘッダーにメインナビゲーションを内包する

<header><nav>~</nav></header>

文書全体のヘッダーにheader要素を使用する場合、以下の例のようなメインのナビゲーションメニューやWebサイトのロゴ、検索フォームなどを内包する方法が考えられます。

<header>
  <nav>
  <h1>メインメニュー</h1>
    <ul>
      <li><a href="/">ブログ</a>
      <li><a href="/blog">メニュー</a>
      <li><a href="/contact/"> 店舗情報</a>
      <li><a href="/contact/">お問い合わせ</a>
    </ul>
  </nav>
</header>

関連記事