<header> セクションの先頭となるグループを表す
| 取り扱い | 現行の標準 |
| カテゴリ |
フロー・コンテンツ パルパブル・コンテンツ |
| 親にできる要素 | フロー・コンテンツを受け入れる要素。ただし、<header>、<address>、<footer>を除く |
| 子にできる要素 | フロー・コンテンツ。ただし、<header>、<footer>を除く |
| 対応ブラウザ | caniuseで確認 |
<header>タグの説明
<header>は、イントロダクションやナビゲーションなど、セクションの先頭となるグループを表します。よく使われる場所として、<body>直下や<article>直後が挙げられます。
例えば、ウェブページの最上部に<header>を設置し、子要素に<h1>を置いてサイト名を記述したとします。この場合、サイト名が文章構造上の意味としてウェブページの導入部分であると宣言したことになります。
別の例として、ページの中に独立した記事やコンテンツがある場合、<article>の子要素に<header>を記述することが考えられます。<header>に含まれる内容は、記事の見出しや著者、公開日時などの導入部分にあたるものです。
ここで重要なのは、文章構造がしっかりとマークアップできていれば、<header>は何個でも置くことが可能ということです。ページ単位で見た場合に、ヘッダーは一つしか存在しえないと思いがちですが、このタグはセクションの導入部分を表すものなので、その意味での制約はありません。
<header>は、ページのメタ情報を記述する<head>とは別の要素です。似たような綴りですが、その役目は全く異なります。混合しないように気をつけましょう。
<header>タグの特徴
- レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
- この要素はセクショニング・コンテンツではないので、アウトラインに影響を与えません。
- 視覚的な効果は特に与えられません。必要に応じてスタイルシートを調整して下さい。
- 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。
<header>に指定できる主な属性
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<header>の使い方とサンプル
以下の例は、ページの最上部にサイト全体の先頭部分にあたる情報をまとめて、<header>で囲った場合の記述です。
HTML
<body>
<header>
<h1>サイト名</h1>
<h2>このサイトのキャッチコピー</h2>
<nav>
<ul>
<li><a href="home">ホーム</a></li>
<li><a href="blog">ブログ</a></li>
<li><a href="contents">コンテンツ</a></li>
<li><a href="sitemap">サイトマップ</a></li>
<li><a href="contact">コンタクト</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h1>コンテンツの見出し</h1>
<p>コンテンツの内容。コンテンツの内容。</p>
<p>コンテンツの内容。コンテンツの内容。</p>
</section>
</main>
<footer>
フッターの内容
</footer>
</body>
続いて、<article>の中に<header>を用いて、メインコンテンツの先頭部分を明確化した場合のサンプルです。
HTML
<article>
<header>
<h1>コンテンツの見出し</h1>
<time datetime="2045-10-10" pubdate>2045年10月10日</time>
<cite><a href="https://twitter.com/xxxxxx">@著者アカウント</a></cite>
</header>
<section>
<h1>セクションの見出し</h1>
<p>コンテンツの内容。コンテンツの内容。</p>
<p>コンテンツの内容。コンテンツの内容。</p>
</section>
<section>
<h1>セクションの見出し</h1>
<p>コンテンツの内容。コンテンツの内容。</p>
<p>コンテンツの内容。コンテンツの内容。</p>
</section>
</article>
<header>に関連するHTMLタグ
| 文書の構造を組み立てる要素 | |
|---|---|
| <article> | 自己完結した記事であることを示す |
| <section> | 文書構造におけるセクションを定義する |
| <aside> | 本筋から分離しても問題のない余談や補足を表す |
| <nav> | ページ上の主要なナビゲーションであることを表す |
| <header> | セクションの先頭となるグループを表す |
| <footer> | セクションのフッターを表す |
| <h1> 〜 <h6> | 文書やセクションの見出しを表す |
| <p> | 文章の段落を指定する |