基礎

HTML要素

ヘッダー

header要素

最終更新日：2023-09-18
公開日：2016-01-20

ページやセクションのヘッダーを表します。ロゴやグローバルナビゲーションなどが置かれるサイト共通部分として使用したり、記事ページの冒頭を表す際に使用します。head要素と名前が似ていますが、body要素の子孫要素としてのみ使用できます。

HTML サンプルコード

<header>
  <p class="logo"><a href="/">サイトロゴ</a></p>
  <nav>
    <ul>
      <li><a href="/service">サービス一覧</a></li>
      <li><a href="/area">提供エリア</a></li>
      <li><a href="/company">会社概要</a></li>
      <li><a href="/blog">ブログ</a></li>
    </ul>
  </nav>
</header>

カテゴリー

フローコンテンツ、パルパブルコンテンツ
コンテンツモデル

フローコンテンツ
使用ケース

フローコンテンツが期待される場所（ただし、header要素、footer要素、main要素を子孫要素として持つことはできません）

属性

グローバル属性: グローバル属性のみ使用することができます。
グローバル属性について詳しくは、「HTMLのグローバル属性」をご覧ください。

使用例

ブログの記事ページを想定したサンプルコード

次のHTMLコードは「コーヒーの淹れ方」をテーマにした記事での使用例です。

HTML コード例

<main>
  <article>
    <header>
      <h1>コーヒーの淹れ方について</h1>
      <p><b class="lead">多くの方に親しまれているコーヒー。お仕事に、休日のひと時に、目覚めの一杯など様々な場面で飲む機会があります。<br>今回は、そんなコーヒーをより楽しむための美味しい入れ方をご紹介します。</b></p>
    </header>
    <section>
      <h2>本文が入ります</h2>
      <p>金属のフィルターで濾すフレンチプレスは、コーヒーの油分まで余すことなく抽出できるため、コーヒーの素材本来の美味しさをお楽しみいただけます。</p>
      <p>...本文...</p>
    </section>
  </article>
</main>