トップページ > HTML Living Standard > <header>

★HTML Living Standard リファレンス

<header> …… 導入部分やナビゲーション補助のグループを表す
Internet Explorer

<header>タグは、導入部分やナビゲーション補助のグループを表す際に使用します。

header要素は通常、見出し（h1–h6要素や hgroup要素）を含むことを意図していますが、これらは必須ではありません。 header要素は、セクションの目次、検索フォーム、関連ロゴなどをまとめる際などにも使用できます。

header要素は文書のアウトラインに影響を与えない要素であり、新しいセクションを作成しません。

以下に、header要素の使用例をいくつか示します。

■使用例

最初のサンプルは、ウェブページの導入部分という想定です。 header要素のなかにh1要素の見出しが含まれていますが、これは標準的なheader要素の使い方です。

HTMLソース

<header>
 <p>ゲームの国へようこそ...</p>
 <h1>パズルゲーム</h1>
</header>

↓↓↓

ブラウザ上の表示

ゲームの国へようこそ...

パズルゲーム

■使用例

次のサンプルは、ウェブページの導入部分とナビゲーション補助部分という想定です。それら全体をheader要素に指定しています。

HTMLソース

<header>

 <hgroup>
  <h1>フルスクリーン API</h1>
  <p>Living Standard — 最終更新日 2015年10月19日<p>
 </hgroup>

 <dl>
  <dt>参加方法:</dt>
  <dd><a href="https://github.com/whatwg/fullscreen">GitHub whatwg/fullscreen</a></dd>
  <dt>コミット:</dt>
  <dd><a href="https://github.com/whatwg/fullscreen/commits">GitHub whatwg/fullscreen/commits</a></dd>
 </dl>

</header>

↓↓↓

ブラウザ上の表示

フルスクリーン API

Living Standard — 最終更新日 2015年10月19日

参加方法:: GitHub whatwg/fullscreen
コミット:: GitHub whatwg/fullscreen/commits

■使用例

header要素は文書のアウトラインに影響を与えない要素であり、新しいセクションを作成しません。そのため、header要素の後のコンテンツは、header要素で開始された最後のサブセクションの一部のままです。次のサンプルでは、HTMLソース中のコメントでそのことを解説しています。

HTMLソース

<body>
 <header>
  <h1>ゲームの広場</h1>

  <nav>
   <ul>
    <li><a href="/games">ゲーム</a>
    <li><a href="/forum">フォーラム</a>
    <li><a href="/download">ダウンロード</a>
   </ul>
  </nav>

  <h2>重要なお知らせ</h2>
  <!-- このh2要素により、２番目のサブセクションが始まります -->
  <p>今日のゲームをプレイするには、利用環境をアップデートする必要があります。</p>
  <!-- ここは「重要なお知らせ」と題されたサブセクションの一部です -->

  <h2>ゲーム</h2>
  <!-- このh2要素により、３番目のサブセクションが始まります -->
 </header>
 <p>あなたがプレイ中のゲームが３つあります:</p>
 <!-- ここはまだ「ゲーム」と題されたサブセクションの一部です -->
 ...

↓↓↓

ブラウザ上の表示

ゲームの広場

重要なお知らせ

今日のゲームをプレイするには、利用環境をアップデートする必要があります。

ゲーム

あなたがプレイ中のゲームが３つあります:

...

■関連項目

<body> …… 文書の本体（コンテンツ）を表す
<article> …… 自己完結する内容であることを表す
<section> …… 一般的なセクションを表す
<nav> …… ナビゲーションリンクのセクションを表す
<aside> …… メインコンテンツとは別のコンテンツであることを表す
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> …… セクションの見出しを表す
<hgroup> …… 見出しとその関連コンテンツを表す
<header> …… 導入部分やナビゲーション補助のグループを表す
<footer> …… フッターを表す
<address> …… 連絡先情報を表す

★HTML Living Standard リファレンス

■使用例

HTMLソース

ブラウザ上の表示

■使用例

HTMLソース

ブラウザ上の表示

■使用例

HTMLソース

ブラウザ上の表示

■関連項目

Sponsors