トップページ | HTML5編・目次

●セクション用の要素を使い分ける

更新日:
公開日:

 HTML5では文書を構造化する要素が新しく定義され、幾つか追加されました。文書の一般的なセクションまたはアプリケーション用のセクションには、section要素、ひとつの完結した記事のセクションである場合は、article要素、コンテンツの前後には関連性があるもののメインコンテンツから分離しても構わないセクションの場合には、aside要素、ナビゲーション用のセクションには、nav要素といった具合です。これらはコンテンツ・モデルでいうところのセクショニング・コンテンツとフロー・コンテンツのカテゴリーに属し、フロー・コンテンツが配置可能な場所において配置することができ、要素内容にフロー・コンテンツに属する要素を入れることが可能です。ただし、HTML5では用途や目的に応じてこれらを使い分ける必要があります。

 また、ヘッダー部分の領域をグループ化させる要素であるheader要素とフッター部分をグループ化させる要素であるfooter要素があります。header要素とfooter要素はフロー・コンテンツに属し、フロー・コンテンツが配置可能な場所において配置することができ、両方とも要素内容にheader要素とfooter要素以外のフロー・コンテンツに属する要素を入れることが可能です。

 section要素、article要素、aside要素、nav要素のセクショニング・コンテンツとフロー・コンテンツのカテゴリーに属する4つの要素とheader要素とfooter要素を合わせた要素の使い分けという観点から説明しておきます。尚、HTML文書でいうセクションとは見出しやその内容を表す要素やテキストで構成される特定の範囲のコンテンツのことを指しています。また、header要素とfooter要素は、それぞれヘッダー領域とフッター領域をグループ化する要素であり、section要素、article要素、aside要素、さらには、nav要素のようにセクションそのものを定義する要素でない点にご注意ください。

※header要素とfooter要素は、セクションの一部またはセクションに含まれる要素と考えられています。

■セクションを定義する要素およびセクションと関係のある要素一覧

Tag 備考
<article> 記事セクションの定義
<aside> メインコンテンツ外のセクションの定義。例:補足情報のセクション。
<nav> セクションにあるナビゲーションリンクの定義。サイト内のページへのリンクの集まりの要素になります。
<section> セクションの定義。一般的なドキュメント、または、プログラムのセクションを表します。section要素は文章でいうところの章や節を表しますが一般に、その内部に見出し(h1~h6)が含まれます。ただし、<article>、<nav>、<aside>といった要素の使用が適切な場合はそれらの要素で定義してください。
<header> ページまたはセクションのためのヘッダー領域の定義。ページタイトルやサブタイトル、ロゴ、前置的な文章などをグループ化させるための要素です。
<footer> ページまたはセクションのためのフッター領域の定義。コピーライト、関連リンク、サイト名などをグループ化させるための要素です。

■既存のマークアップ

 従来のHTMLでは、ヘッダー領域、フッター領域、ナビゲーション、サイドバーなどがすべてdiv要素で構成されていたため、HTMLドキュメントの構造がわかりにくい面がありました。 例えば、従来はbody要素にヘッダー領域を設置する場合は、「<div id="header">~」、フッター領域を設置する場合は、「<div id="footer">~」、ナビゲーションがある領域には、「<div id=”nav”>~」、あるいは、「<div id=” navigation”>~」といったように、id属性に使われる値は作者の感性に委ねられ、各サイトでその識別子はばらばらでした。しかし、これらの要素を使うことにより、HTMLの構造を記述するソースが実にシンプルになり、かつ、用途に応じた区分けが明確になって記述が統一されるようになったというわけです。では具体的に配置図の一例です。

■新要素を使ったマークアップの一例

セクション用の新要素を配置した例。

※main要素の意味と使い方につきましては、別項の「main要素の使い方」を参照。

■セクション用の要素はどのように使い分けるか

 おおざっぱですが、イメージとしてはこのような感じになります。nav要素はナビゲーション用の要素になりますし、header要素とfooter要素の使い分けも迷いはないと思いますが、section要素とarticle要素とaside要素、特に、article要素とaside要素の区別は意外と難しいと聞きます。section要素は文書の一般的なセクションまたはアプリケーション用のセクションの場合に使いますが、ひとつの完結した記事のセクションである場合には、article要素を使います。よくブログ記事に例えられますが、ニュース記事や新着情報、あるいは社内情報などもこれに入るでしょう。もっと端的に言えば、RSSの配信記事の対象となり得るのがarticle要素です。aside要素はコンテンツの前後には関連性があるもののメインコンテンツから分離しても構わないセクションの場合に使いますが、これだとわかりにくいですよね。HTMLドキュメントと関連性のあるセクションを配置する場合はどんな場合があるでしょうか?サイト内検索ツールやアーカイブ、カテゴリー、metaタグやカレンダーなど、ブログのサイドバーによくあるようなおなじみのものがこれに当てはまると思います。サイトに関連性のあるものは、aside要素、ひとつの記事に当てはまる場合、またはRSSの対象となり得る場合には、article要素。それ以外のごく一般的なセクションを示す場合には、section要素となりますね!

■ソース

 参考までに上記の画像のような配置にした場合のHTML5のソースを添えておきます。なお、article要素、aside要素、nav要素、section要素といったセクショニング・コンテンツなのでそれぞれ見出しを入れる必要がありますのでそれに沿った記述になっています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>HTML5</title>
・・
</head>
<body>
<header>
<h1>header:ヘッダー領域</h1>
</header>
<nav>
<h2>nav:ナビゲーション</h2>
</nav>
<main>
<article>
<h2>article:独立したコンテンツ</h2>
<section>
<h3>section:一般的なセクション</h3>
</section>
<section>
<h3>section:一般的なセクション</h3>
</section>
</article>
<article>
<h2>article:独立したコンテンツ</h2>
<section>
<h3>section:一般的なセクション</h3>
</section>
<section>
<h3>section:一般的なセクション</h3>
</section>
</article>
</main>
<aside>
<h2>aside:関連のあるセクション</h2>
<section>
<h3>section:一般的なセクション</h3>
</section>
<section>
<h3>section:一般的なセクション</h3>
</section>
<section>
<h3>section:一般的なセクション</h3>
</section>
</aside>
<footer>
<p>footer:フッター領域</p>
</footer>
</body>
</html>

※サンプルなので簡略化していますが各セクションの要素内容には実際に配置するソースをそれぞれ入れる必要があります。また、HTML5文書を完成させましたら、マークアップ検証されることをおすすめします。

目次 | HTML5編・目次

Copyright (C) 2011 http://www.xml.vc/ All Rights Reserved.