最終更新日 2021年4月7日

header要素

通常はページの上部に表示される、いわゆる「ヘッダー」部分のコンテンツを指定します。ヘッダー部分には通常、セクションの見出しや目次、サイト内の検索フォーム、ロゴ画像といった案内的なコンテンツが含まれるのが一般的です。

header要素は、Flowコンテンツの記述箇所で使用できます。

header要素はSectioningコンテンツではないため、そこから新しいセクションが開始されることはありません。

子要素にheader要素やfooter要素を含めることはできません。

HTML5での変更点

・header要素は、HTML5で追加された新しい要素です。

カテゴリ	タグの省略	親要素	子要素
Flowコンテンツ	省略不可	Flowコンテンツを子にできる要素	Flowコンテンツ（header、footerは除く）

属性	値	説明
グローバル属性	-	-
イベント属性	-	-

サンプルコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>ショップ案内</title>
  </head>
  <body>
    <header>
      <p><img src="logo.png" alt="マクドエイド"></p>
      <h1>ショップ案内</h1>
    </header>
    <p>マクドエイドは、本格的ハンバーガー専門店です。</p>
    <p>当店のウリは、香ばしく焼き上げられたビーフパティです。</p>
  </body>
</html>

参考文献：W3C HTML5「4.4.8 The header element」

当サイトの活動をサポートしてみませんか？気軽にクリエイターの支援ができます。