最終更新日

header要素

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

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

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

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

HTML5での変更点
・header要素は、HTML5で追加された新しい要素です。
カテゴリ タグの省略 親要素 子要素
Flowコンテンツ 省略不可 Flowコンテンツを子にできる要素 Flowコンテンツheaderfooterは除く)
属性 説明
グローバル属性 - -
イベント属性 - -
サンプルコード
<!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」外部リンク
HOME