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

★HTML Living Standard リファレンス

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

<header>タグは、ヘッダーを表す際に使用します。

header要素には、通常はh1–h6要素による見出しや、 hgroup要素による見出しグループが含まれることが意図されていますが、これらは必須ではありません。

ヘッダーの明確な定義はありませんが、一般的にはウェブページの導入部分やナビゲーションなどが含まれるかもしれません。他にも、セクションの目次、検索フォーム、関連ロゴなどをまとめる際などにも使用できます。

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

■使用例

以下のサンプルは、header要素の典型的な使用例です。ウェブページの導入部分でheader要素を使用しており、そのなかにh1要素を配置しています。

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要素が新しいセクションを生成しないことをHTMLソースのコメントで解説しています。

header要素は、文書のアウトラインに影響を与えない要素であり、新しいセクションを生成しません。そのため、header要素の後のコンテンツは、header要素で開始された最後のサブセクションの一部のままです。

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