W3C のサイトでは、以下のページで解説されている。
4.4 Sections — HTML5
この文書をもとに、セクション関連タグを整理してみた。
【関連記事】
HTML4/XHTML1 から HTML5 への変更点
HTML5 のコンテンツグループ化関連タグ
HTML5 のテキストの意味付け関連タグ
HTML5 の埋め込みコンテンツ関連タグ
HTML5 のフォーム関連タグ
セクション関連要素一覧
| 要素 | カテゴリ | タグ内に含むもの | 説明 |
|---|---|---|---|
body |
sectioning root | flow content | ドキュメントのメインコンテンツ。 |
section |
flow content sectioning content formatBlock candidate |
flow content | ドキュメントやアプリケーションの一般的なセクション。 同一テーマのかたまりで、たいていはヘッダーがついている。 |
nav |
flow content sectioning content formatBlock candidate |
flow content | ナビゲーションリンクを記述するセクション。 リンクグループをすべて nav 要素に入れる必要はなく、メインのナビゲーションブロックだけを入れる。 |
article |
flow content sectioning content formatBlock candidate |
flow content | 自己完結した文のまとまり。 たとえば、ブログの個々の記事など。 article の入れ子もありうる。 |
aside |
flow content sectioning content formatBlock candidate |
flow content | 本文の補足記事。 注記や補足情報など、本文の主題から逸れた内容の記述に使う。 |
h1〜h6 |
flow content heading content formatBlock candidate |
phrasing content | ヘッダー。 |
hgroup |
flow content heading content formatBlock candidate |
1つ以上の h1, h2, h3, h4, h5, h6 要素 |
ヘッダーが多階層から成る場合に、h1〜h6 要素をまとめるのに使う。ページのサマリーを作る時、 hgroup のところは h1〜h6 の最上位のものが使われる。 |
header |
flow content formatBlock candidate |
flow content (header, footer 要素を除く) |
article の導入部分に使用する。h1〜h6、hgroup などをまとめたもの。目次、検索欄、関連ロゴなどの表示にも使える。 |
footer |
flow content formatBlock candidate |
flow content (header, footer 要素を除く) |
フッター情報。 著者、関連文書へのリンク、著作権表示などの表示に使う。 セクション全体が含まれている場合は、付属文書、索引、奥付、ライセンス契約などを意味する。 記述位置はセクションの最後でなくてもよい。 |
address |
flow content formatBlock candidate |
flow content (heading content、sectioning content、header, footer, address 要素を除く) |
記事に関する連絡先情報。 ※任意の住所を記述するためのものではなく、あくまで関連する連絡先を記述するためのもの。 通常は footer 要素の中に記述する。 |
例
以下は、W3C のサイトを参考にして書いたサンプルコード。
<header>
<h1>全日本スローライフ推進委員会</h1>
<nav>
<hgroup>
<!-- ヘッダー情報を拾い出すアプリケーションは、「関連リンク」を採用する -->
<h1>関連リンク</h1>
<h2>スローライフに関する他のサイト</h2>
</hgroup>
<ul>
<li><a href="http://www.nowhere1.org/history.html">日本のスローライフ</a></li>
<li><a href="http://www.nowhere2.org/">全国スローライフ満喫協会</a></li>
</ul>
</nav>
</header>
<aside>
<!-- aside をブログのサイドバーのリンクに使用した例 -->
<nav>
<h1>お気に入り</h1>
<ul>
<li><a href="http://www.nowhere3.org/">のんびり行こうよ、どこまでも</a></li>
<li><a href="http://www.nowhere4.org/">委員会議事録</a></li>
</ul>
</nav>
<nav>
<h1>最近の記事</h1>
<ul>
<li><a href="111111.html">スローライフ推進委員会のお知らせ</a></li>
<li><a href="111110.html">新委員のご紹介</a></li>
<li><a href="111109.html">遅食い大会のスタッフが決まりました</a></li>
</ul>
</nav>
</aside>
<div>
<article>
<header>
<h1>第32回 遅食い大会開催のお知らせ</h1>
<p><time pubdate datetime="2010-07-10T10:28+09:00"></time></p>
</header>
<p>恒例の遅食い大会を開催いたします。</p>
<p>...</p>
<aside>
<h1>遅食い大会</h1>
<p>遅食い大会は、全日本スローライフ推進委員会が主催する遅食い競争の全国大会。</p>
<p>...</p>
</aside>
<section>
<h1>コメント</h1>
<article>
<footer>
<p>投稿者: 十年寝太郎</p>
<p><time pubdate datetime="2010-07-11T19:10+09:00"></time></p>
</footer>
<p>今年ももちろん参加します。</p>
</article>
<article>
<footer>
<p>投稿者: 56寸法師</p>
<p><time pubdate datetime="2010-07-12T09:15+09:00"></time></p>
</footer>
<p>素敵なイベントですね。</p>
</article>
</section>
</article>
<article>
...
</article>
</div>
<footer>
<p>opyright © 2010 Japan Slowlife Lovers</p>
<p><a href="about.html">About Us</a> -
<a href="privacy.html">Privacy Policy</a> -
<a href="contact.html">Contact Us</a></p>
</footer>
タグ：HTML5
