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

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

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

関連するページを読む

navタグの使い方 - HTML

headerタグの使い方

このページの目次

• headerタグの使い方
  • ページの最初に設置する必要はない
  • 複数回使用できる
  • 見出しを含むことが多い
  • 🙅headerはセクションを作るわけではない
  • 🙅header・footerを入れ子にしない
  • 🙅装飾を目的として使わない

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

<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>を使うようにしましょう。