headerタグ 👉 導入的なコンテンツをまとめる

HTMLの<header>ヘッダータグは、「見出し」や「ロゴ」「検索フォーム」「ナビゲーション」などの導入的なコンテンツをまとめるために使います。

MDNのheaderタグ
👆例えばMDN web docsのページ最上部の<header>タグには、ロゴやナビゲーション(<nav>)、検索フォームなどが含まれています。

headerタグの使い方

ページの最初に設置する必要はない

<header>という名前ですが、ページの最初以外にも設置できます。

<article>
  <!-- 記事のタイトルや日付をheaderに -->
  <header>
    <h1>美味しい珈琲を飲むために</h1>
    <p><time datetime="2019-04-21">2019/12/21</time></p>
  </header>
  <section>
    <h2>豆にこだわる</h2>
    <p></p>
  </section>
</article>

👆たとえばブログならタイトルや投稿日などの記事の導入部分に使用すると良いでしょう。

複数回使用できる

<header>は必要であれば、1つのHTML文書の中で複数回使用できます。

見出しを含むことが多い

<header>要素には見出し(<h1>-</h6>)を含むことが多いですが、設置しなければいけないというルールはありません。

🙅headerはセクションを作るわけではない

<header>自体は<article><section>のようにセクション(1つの意味を持つまとまり)を作るものではありません。文章のセクションを分ける(アウトラインを作る)ような目的で使わないようにしましょう。

🙅header・footerを入れ子にしない

<header>の子要素に<header><footer>を入れるべきではありません。また<footer>の中に<header>を入れるべきでもありません。

🙅装飾を目的として使わない

装飾だけを目的としている場合は <header>ではなく <div>を使うようにしましょう。

😺主要なブラウザではdisplay: blockが標準のスタイルとしてあてられています。

ブラウザ対応状況

🖥デスクトップ

  • Chromeのアイコン
    Chrome
    26〜
  • Safariのアイコン
    Safari
    6.1〜
  • Firefoxのアイコン
    Firefox
    21〜
  • Edgeのアイコン
    Edge
    12〜
  • IEのアイコン
    IE
    11で部分的に対応

📱モバイル

  • Android Chromeのアイコン
    Android Chrome
    79〜
  • iOS Safariのアイコン
    iOS Safari
    7〜

IE対応のためにはCSSにheader { display: block; }を追加します。

caniuse.comで詳しく見る