その他のセクションに関連した要素
セクションを明示する要素ではありませんが、セクションに関連するそのほかの要素を解説します。
header要素
- カテゴリー：フローコンテンツ
- この要素が使える文脈：フローコンテンツが予想される場所
- コンテンツモデル：フローコンテンツですが、header要素・footer要素は含められません
header要素は、セクションのヘッダーを表します。通常は見出し要素が入ることを想定されていますが、必須ではありません。
ヘッダーというと、ページの上部にある「いわゆるヘッダー」を想像しがちですが、header要素の用途はそれだけではありません。ページ上部のヘッダーを「ページヘッダー」と呼ぶとしたら、セクションごとのヘッダーである「セクションヘッダー」も存在します。
以下に具体例を示します。
ページヘッダーとセクションヘッダーの例
<body>
<header>
<h1><img src="/img/logo.png" alt="hamashun ブログ" /></h1>
<p>hamashun のブログです</p>
</header>
<article>
<header>
<h1>今日は僕の誕生日です！</h1>
<time>2011-09-09</time>
</header>
<p>みなさんどう思いますか？</p>
<p>実は僕は飯屋なんです。</p>
</article>
body要素直下のheader要素がページヘッダーで、article要素直下のheader要素がセクションヘッダーです。
header要素では、以下のようにnav要素を含むことがよくあります。
<header>
<h1>hamashun.com</h1>
<nav>
<ul>
<li><a href="/home/">Home</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/blog/">Blog</a></li>
<li><a href="/link/">Link</a></li>
</ul>
</nav>
</header>
footer要素
- カテゴリー：フローコンテンツ
- この要素が使える文脈：フローコンテンツが予想される場所
- コンテンツモデル：フローコンテンツですが、header要素・footer要素は入れられません
footer要素は、セクションのフッターを表します。多くの場合、セクションの最後に登場しますが、位置は特に指定されていませんので、セクションのどこにでも記述できます。
footer要素もheader要素と同じく、ページフッターとセクションフッターがあり得ます。
<article>
<header>
<h1>今日は僕の誕生日です！</h1>
</header>
<p>みなさんどう思いますか？</p>
<p>実は僕は飯屋なんです。</p>
<footer>
<time>2011-09-09</time>
<p>投稿者：hamashun</p>
</footer>
</article>
<footer>
<ul>
<li><a href="/home/">Home</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/blog/">Blog</a></li>
<li><a href="/link/">Link</a></li>
</ul>
<p><small>© 2006 hamashun.com</small></p>
</footer>
</body>
body要素直下のfooter要素がページフッターで、article要素直下のfooter要素がセクションフッターです。
また、最近よく見かけるページフッターとして、ナビゲーションやプロフィールなどが記述され、「コンテンツとしての役割を持つフッター」があります。これもfooter要素を使ってマークアップできます。
<footer>
<nav>
<section>
<h1>最新記事</h1>
<ul>
<li><a href="#">今日は僕の誕生日です！</a></li>
...省略...
</ul>
</section>
<section>
<h1>月別アーカイブ</h1>
<ul>
<li><a href="#">2011-09</a></li>
...省略...
</ul>
</section>
<section>
<h1>カテゴリーアーカイブ</h1>
<ul>
<li><a href="#">日記</a></li>
...省略...
</ul>
</section>
</nav>
<section>
<h1>プロフィール</h1>
<p>はじめまして...</p>
</section>
<p><small>© 2006 hamashun.com</small></p>
</footer>
address要素
- カテゴリー：フローコンテンツ
- この要素が使える文脈：フローコンテンツが予想される場所
- コンテンツモデル：フローコンテンツですが、ヘッディングコンテンツ・セクショニングコンテンツ・header要素・footer要素は入れられません
address要素は、「直近の祖先のarticle要素・body要素によるセクション」に対する連絡先を表します。直近のセクションがbody要素によるセクションの場合は、文書全体に対する連絡先となります。一方、複数人でブログを運営している場合は、記事（article要素）ごとにaddress要素を置くことで、それぞれの記事に対する連絡先となります。
ポイント
「body要素やarticle要素によるセクション」の子孫であればよく、body要素やarticle要素の直下に記述することは必須ではありません。たとえば、body要素の直下にfooter要素があり、その中にaddress要素を記述しても、body要素に対する連絡先となります。
文書全体に対しての連絡先の例
<body>
<h1>hamashun.com</h1>
...省略...
<address><a href="/about/hamashun">浜 俊太朗</a></address>
</body>
記事ごとの連絡先の例
<article>
<h1>京都旅行における散歩について</h1>
...省略...
<footer>
<address><a href="http://example.com/taninaka">谷中 剛</a></address>
</footer>
</article>
<article>
<h1>スカイツリーの撮影に関する注意点</h1>
...省略...
<footer>
<address><a href="http://example.com/sobie">空塔 聳</a></address>
</footer>
</article>
address要素で示す連絡先は、あくまでも「そのarticle要素またはbody要素の連絡先」であり、連絡先なら何でもいいわけではありません。たとえば、次のような使い方は誤りです。
address要素の誤用例
<article>
<h1>おいしいパン屋：パン・ド・ワッサン</h1>
<p>クロワッサンがおいしいおすすめのパン屋です！ 住所は以下です。</p>
<address>住所：東京都世田谷区○○-○, 電話番号：XX-XXXX-XXXX</address>
</article>
このソースコードの場合、address要素が示す連絡先は「おいしいパン屋：パン・ド・ワッサン」という記事を書いた人になるはずですが、実際にはパン屋の連絡先になってしまっています。
単に住所などを表したい場合はp要素などを使用し、さらにセマンティクスを求める場合はマイクロフォーマットやマイクロデータを利用しましょう。
