セクション関連要素（1/2）

body要素（ドキュメントの本文）

body要素は、ドキュメントの本文を表し、ドキュメント内にはbody要素を2つ以上入れることはできません。

section要素（セクション）

section要素は、一般的なセクションを表します。必ず、章や節といった単位を使う必要があるので、この要素の中にh1～h6要素を使って見出しを入れます。また、スタイルのためだけにこの要素を使ってはいけません。

■利用例

  <article>
    <h1>記事の見出し</h1>
    <p>ここには記事の内容を記述します。</p>
    <section>
    	<h2>〇月〇日について</h2>
        <p>ここには日付ごとの記事を記述していきます。</p>
    </section>
    <section>
    	<h2>〇月〇日の内容</h2>
        <p>ここには日付ごとの記事を記述していきます。</p>
    </section>
  </article>
    

利用例を見てみると、これはあるブログ記事の例です。ブログ記事はその内容の性質から言ってarticle要素で囲む方がふさわしいです。記事の中には、さらに細かな内容となり小見出しがついている節があります。これをsection要素で囲みます。これは、ある記事の中を日付ごとに分けることによって、文書構成がより分かりやすくなるからです。

section要素とdiv要素は混同されやすいです。違いは、section要素は章や節の単位を表しますが、div要素は単なるグループ化であることです。

見出しと本文を区別して図のような文書構成を行いたいとします。

これを以下のようにマークアップすると間違いになります。

  <section class="chap">
    <h1>見出し</h1>
    <section class="story">
    	<p>本文</p>
    </section>
  </section>
    

section要素は、見出しと本文の両方をまとめるために使わなければならないために、このような記述をしてしまうと本文に相当する部分が、別のセクションとして解釈されてしまいます。
正しいマークアップは、次のように本文をdiv要素で囲むようにすればよいです。

  <section class="chap">
    <h1>見出し</h1>
    <div class="story">
    	<p>本文</p>
    </div>
  </section>
    

また、ページを段組みにする場合、段組みのレイアウトのためだけにsection要素を使うことは間違っています。例えば、下の図のような段組みを構成するとします。

ヘッダー部分は"header要素"、フッター部分は"footer要素"を使います。中央の3段組みは、div要素でそれぞれ囲みます。そして、メニューはdiv要素内に"nav要素"、本文にはdiv要素内に"article要素"、バナーはdiv要素内に"aside要素"を使います。もちろん、それぞれの内容によって使う要素は適切に使い分けることになります。

このように、段組みを構成したい場合はsection要素は使わないようにします。section要素は章や節を表すという定義からして、見出しを入れることができない領域で使うことを避けるべきです。

nav要素（ナビゲーション）

nav要素はナビゲーションを形成するセクションを表しますが、すべてのハイパーリンクに使ってはいけません。ページやサイトにとって主要なナビゲーションに使います。

また、ページのフッター部分に用意されているナビゲーションは補助的なメニューとなるので、このような場所にはnav要素は適していません。

■利用例

  <nav>
    <ul>
      <li><a href="menu1">メニュー1</a></li>
      <li><a href="menu2">メニュー2</a></li>
      <li><a href="menu3">メニュー3</a></li>
      <li><a href="menu4">メニュー4</a></li>
    </ul>
  </nav>
    

nav要素の中にul要素を使いリストとして各ナビゲーションを作る方法が良く利用されています。また、1つのページ内にnav要素をたくさん使うことは仕様上、適していませんので、サイト全体のナビゲーション、サイトカテゴリのナビゲーション、パンくずリストなどのナビゲーションなどに制限して使うと良いです。

また、サイトマップのページは、基本的にはナビゲーションの集まりになります。しかし、サイトマップのコンテンツはそのページのコンテンツになるので、nav要素を使わないで、section要素などでマークアップするのが適切となります。

article要素（記事）

article要素は、それ自身で独立したコンテンツを表します。例えば、ブログの記事やニュースの記事などが挙げられます。ウェブ・アプリケーションの場所であれば、ウィジット（特定の機能を実行するための簡易的なアプリケーションの総称）やガジェット（時計やカレンダーなどの小さな規模のプログラムのこと）と言われる領域にも使われます。

■利用例

  <article>
    <header>
      <h1>大見出し</h1>
      <p><time pubdate="pubdate" datetime="2011-05-02T18:15:00+09:00">
      	  2011年5月2日</time></p>
    </header>
    <p>ここに文章が入る。・・・・・</p>
    ・・・
    <footer>
      <p><a href="2011051901/file/">3件のコメント</a></p>
    </footer>
  </article>
    

article要素は、ブログやニュース記事以外でも、コンテンツとして独立しているのであれば、利用しても構いません。

基本的には、もしフィード（ウェブサイト、特にブログやニュースサイトなどのコンテンツの概要もしくはコンテンツ全体を配信用に加工した文書のこと）を用意した時に、個々のエントリとしてふさわしいコンテンツと言えるのであれば、article要素を利用します。しかし、メインコンテンツがフィードのエントリとしてふさわしいかどうか不明な場合は、無理にarticle要素を使わないで、section要素を使う方が得策です。

aside要素（関連が薄いコンテンツ）

aside要素は、メインのコンテンツとは関連が薄く、切り離すことができると思われるようなものに使います。例えば、補足記事、広告、サイドバーのようなものが該当します。仮にaside要素のコンテンツが削除されて、メインのコンテンツに影響があるのであれば、aside要素を用いるべきではありません。

基本的に、サイトやページに関連性のあるものの、メインのコンテンツとは直接的に関連性がないコンテンツに対して使います。

aside要素の使いどころは難しいです。定義していることが抽象的ですから、最終的には制作者の意図する内容に応じて、判断する必要があります。