<header>タグの解説
<header>は、イントロダクションやナビゲーションなど、セクションの先頭となるグループを表します。よく使われる場所として、<body>直下や<article>の開始直後が挙げられます。
例えば、<header>はセクショニング・コンテンツの中に配置されない限り、bannerというARIAロールを持つため、<body>直下に置かれた場合、ページの中で目印となるランドマークを表します。よく見られる例は、サイト全体に共通するヘッダーとしてロゴ画像やグローバルナビゲーション、検索窓などを設置することが想定されます。特に制限は設けられていないため、見出し要素を含めるかどうかは任意です。
また、ページ内の特定のセクションの中に配置された場合は、単なるフロー・コンテンツとして振る舞いARIAロールが外されます。そのため、アウトラインさえしっかり保たれていれば、ひとつのページに何個も配置できます。
<header>は、ドキュメントのメタ情報を記述する<head>とは別の要素です。似たような綴りですが、その役目は全く異なるため間違えないように気をつけましょう。他には<hgroup>というタグが存在しますが、こちらは主題と副題をフループ化するために用いるものです。状況によって上手く使い分けましょう。
<header>タグの特徴
- レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
- この要素はセクショニング・コンテンツではないので、アウトラインに影響を与えません。
- 視覚的な効果は特に与えられません。必要に応じてスタイルシートを調整して下さい。
- 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。
<header>に指定できる属性
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<header>の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。<header>は<body>の中に配置する要素です。<head>とは役割りも機能も違うため、綴りを間違えないように気をつけましょう。
<body>
<header>
// コンテンツのヘッダーに値する内容
</header>
</body>
以下の例は、ページの最上部にサイト全体の先頭部分にあたる情報をまとめた場合の記述です。グローバルナビゲーションと表現されることもあります。<header>要素を使わずに<div>で囲うケースも多く見られますが、役割りが明確であるコンテンツには、積極的に意味のあるマークアップを行っていきましょう。
<body>
<header>
<h1>サイト名</h1>
<form action="/search">
<input type="text" name="q" value="サイト内">
<button type="submit" name="s">検索</button>
</form>
<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>
<h1>コンテンツの見出し</h1>
<p>コンテンツの内容。コンテンツの内容。</p>
<p>コンテンツの内容。コンテンツの内容。</p>
</main>
<footer>
フッターの内容
</footer>
</body>
続いて、<article>の中に<header>を配置して、メインコンテンツの先頭部分を明確化した場合の参考例です。
<article>
<header>
<h1>コンテンツの見出し</h1>
<time datetime="2045-10-10" pubdate>2045年10月10日</time>
<cite><a href="sns-url">@著者アカウント</a></cite>
</header>
<section>
<h2>セクションの見出し</h2>
<p>コンテンツの内容。コンテンツの内容。</p>
<p>コンテンツの内容。コンテンツの内容。</p>
</section>
<section>
<h2>セクションの見出し</h2>
<p>コンテンツの内容。コンテンツの内容。</p>
<p>コンテンツの内容。コンテンツの内容。</p>
</section>
</article>
上記を組み合わせて、クラス名などを本番環境に近づけてみましょう。以下のようにセクショニング・コンテンツを使ってアウトラインを明確にした場合、ひとつのページに複数の<header>を配置することができます。
<body>
<header class="site-header">
<div class="container">
<div class="site-logo">
<img src="/" alt="Site Name">
</div>
<div class="search-form">
<form action="/search">
<input type="text" name="q" value="サイト内">
<button type="submit" name="s">検索</button>
</form>
</div>
</div><!--/=== container ===-->
<nav class="header-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-nav ===-->
</header><!--/=== site-header ===-->
<div class="contents-layout">
<main class="main-contents">
<header class="post-header">
<h1>コンテンツの見出し</h1>
<div class="post-term">
<p class="category"><a href="category">Category</a></p>
<p class="tag"><a href="tag">tag</a></p>
</div>
<figure class="post-image">
<img src="/images/file" width="800px" height="420px">
<figcaption>©picture copyright.</figcaption>
</figure>
</header><!--/=== post-header ===-->
<div class="post-contnet">
<h2>コンテンツの見出し</h2>
<p>コンテンツの内容。コンテンツの内容。</p>
<p>コンテンツの内容。コンテンツの内容。</p>
<h2>コンテンツの見出し</h2>
<p>コンテンツの内容。コンテンツの内容。</p>
<p>コンテンツの内容。コンテンツの内容。</p>
<h2>コンテンツの見出し</h2>
<p>コンテンツの内容。コンテンツの内容。</p>
<p>コンテンツの内容。コンテンツの内容。</p>
</div><!--/=== post-contnet ===-->
<footer class="post-footer">
コンテンツのフッター
</footer><!--/=== post-footer ===-->
</main><!--/=== main-contents ===-->
<aside class="sidebar">
<h2>サイドバーの見出し</h2>
<section class="ad">広告枠</section>
<nav class="side-menu">
<ul class="category">
<li><a href="cat-id">カテゴリー</a></li>
<li><a href="cat-id">カテゴリー</a></li>
<li><a href="cat-id">カテゴリー</a></li>
<li><a href="cat-id">カテゴリー</a></li>
<li><a href="cat-id">カテゴリー</a></li>
</ul>
<ul class="tag">
<li><a href="tag-id">タグ</a></li>
<li><a href="tag-id">タグ</a></li>
<li><a href="tag-id">タグ</a></li>
<li><a href="tag-id">タグ</a></li>
<li><a href="tag-id">タグ</a></li>
</ul>
</nav><!--/=== side-menu ===-->
</aside><!--/=== sidebar ===-->
</div><!--/=== contents-layout ===-->
<footer class="site-footer">
<nav class="footer-nav">
<ul>
<li><a href="home">Home</a></li>
<li><a href="about">About</a></li>
<li><a href="auther">Auther</a></li>
<li><a href="privacy">privacypolicy</a></li>
<li><a href="contact">contact</a></li>
</ul>
</nav><!--/=== footer-nav ===-->
<small>CopyRight</small>
</footer><!--/=== site-footer ===-->
</body>