HTML <header> タグ

定義と使用方法

<header> 要素は紹介的な内容やナビゲーションリンクのセットを含むコンテナを表します。

<header> 要素は通常次のようなものを含みます：

  • 1つまたは複数のヘッダーエレメント（<h1> - <h6>）
  • ロゴやアイコン
  • 著者情報

ヒント：<header> タグは、通常ドキュメントのヘッダーを定義するために使用されます。

注意：HTMLドキュメントには複数の <header> 要素。しかし、<header> 入れられません <footer>、<address> または別の <header> 要素内。

参照も見てください：

HTML DOM リファレンスマニュアル：ヘッダーオブジェクト

例

例 1

<article>のタイトル：

<article>
  <header>
    <h1>これはタイトルです</h1>
    <p>ビル・ゲイツによって公開されました</p>
    <p>追加情報を提供します。</p>
  </header>
  <p>本文がここにあります.... 本文がここにあります....</p>
</article>

自分で試してみる

例 2

ヘッダー：

<header>
  <h1>これはホームページのタイトルです</h1>
  <p>ビル・ゲイツによって公開されました</p>
</header>

自分で試してみる

グローバル属性

<header> タグは、以下のイベント属性をサポートしています HTML でのグローバル属性。

イベント属性

<header> タグは、以下のイベント属性をサポートしています HTML でのイベント属性。

デフォルトの CSS 設定

ほとんどのブラウザは以下のデフォルト値を使用して表示します <header> 要素：

header {
  display: block;
}

ブラウザのサポート

表の数字は、このタグを最初に完全にサポートしたブラウザのバージョンを示しています。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
5.0 9.0 4.0 5.0 11.1