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

★HTML Living Standard リファレンス

<header> …… 導入部分やナビゲーション補助のグループを表す
Internet Explorer Microsoft Edge Google Chrome Safari Firefox Opera
広告

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

 <p>あなたがプレイ中のゲームが3つあります:</p>
 <!-- ここはまだ「ゲーム」と題されたサブセクションの一部です -->
 ...
↓↓↓

ブラウザ上の表示

ゲームの広場

重要なお知らせ

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

ゲーム

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

...

■関連項目

  • <body> …… 文書の本体(コンテンツ)を表す
  • <article> …… 自己完結する内容であることを表す
  • <section> …… 一般的なセクションを表す
  • <nav> …… ナビゲーションリンクのセクションを表す
  • <aside> …… メインコンテンツとは別のコンテンツであることを表す
  • <h1>, <h2>, <h3>, <h4>, <h5>, <h6> …… セクションの見出しを表す
  • <hgroup> …… 見出しとその関連コンテンツを表す
  • <header> …… 導入部分やナビゲーション補助のグループを表す
  • <footer> …… フッターを表す
  • <address> …… 連絡先情報を表す
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ