HTML5

HyperText Markup Language 5 aside element.

aside 要素

　aside 要素は、補足記事、サイドバー、広告、プル・クォートなどのように、メインのコンテンツとは関連が薄く、切り離す事が出来ると考えられるものに使います。また、ナビゲーションのグループを 1つにまとめるために使う事もできます。

　aside 要素は、仮にその aside 要素のコンテンツを削除したとしても、ページのコンテンツが成り立つものに使うべきです。なくなってしまったらコンテンツとして成り立たなくなるようなものに対して aside 要素を使うべきではありません。

　aside 要素は、それがどこにあるのかで意味が違ってきます。例えば、ブログ記事を入れた article 要素の中で aside を使うのであれば、その記事の内容に何かしらの関係性がなければいけません。もし、この article 要素の中に、aside 要素を使ってブログ・ロールを入れたとしたら、それは不適切と言えるでしょう。通常、ブログ・ロールは、サイトとの関連性はあるかもしれませんが、その記事には関連性はないからです。

　基本的には、サイトやページに関連性はあるものの、メインのコンテンツとは直接的に関連性がないようなコンテンツに対しては、メイン・コンテンツの外で aside 要素を使うべきです。例えば、広告や、サイドバーに入れるようなブログパーツなどです。

aside 要素の概要

カテゴリー

フロー・コンテンツ

セクショニング・コンテンツ

コンテンツ･モデル

フロー・コンテンツ

利用可能な場所

フロー・コンテンツが期待される場所

タグの省略

不可。開始と終了タグの両方が必要。

要素固有のコンテンツ属性

なし

標準的なスタイル

aside {
  display: block;
}

利用シーン①　メイン・コンテンツに関係しないコンテンツ

　メイン・コンテンツに関係しないコンテンツについては、アウトライン上ではトップ・レベルに位置するよう aside 要素を配置するべきです。メイン・コンテンツを表す article 要素や section 要素の中で使うべきではありません。

広告

　広告は、基本的には間接的にしかサイトやページに関連していませんので、aside 要素が適しています。

　しかし、広告というのは、サイトやページに関連するでしょうが、そのページのメイン・コンテンツに直接的に関係しているとは言い難いでしょう。特に、広告配信事業者が提供するような広告は、その内容を意図的にメイン・コンテンツに合わせるとは言えません。Google AdSense のようなコンテンツマッチ式の広告ですら、ウェブ制作者が意図的にメイン・コンテンツに合わせて広告の内容をコーディネートしたわけではありません。

　このような広告は、記事を表す article 要素の外に出して使います。

ブログロール

　ブログロールとは、ブロガーが読者に対して推奨したいブログのリンクを掲載したものです。ブログロールは、間接的にしかサイトやページに関連していませんので、aside 要素が適しています。

　しかし、ブログロールは、ブログ・サイトには関係すると言えますが、メイン・コンテンツには直接的に関係するものではありません。これも一種の広告に近いコンテンツと言えます。そのため、メイン・コンテンツを表す article 要素の中で使うべきではありません。

利用シーン②　メイン・コンテンツに関係するコンテンツ

　aside 要素は、間接的にしか関係しないコンテンツを表すわけですが、ページのメイン・コンテンツに対して間接的に関係するコンテンツというのもあります。このようなコンテンツを表す aside 要素は、メイン・コンテンツを表す article 要素の中で使うのが適切です。

イメージ写真

　イメージ写真とは、ニュースサイトの記事ページの最初に掲載する事が多いのですが、読者にその記事の内容を連想させるために使う写真の事を指します。このようなイメージ写真には aside 要素が適しています。そして、記事を表す article 要素の中に入れて使うべきです。写真に限らず、イメージ図にも aside 要素が適しています。

　もしその写真が、イメージ写真ではなく、スクープ写真だとしたら、aside 要素を使うべきではありません。そのスクープ写真は、れっきとしたメイン・コンテンツの一部だからです。

補足記事

　補足記事とは、メイン記事に出てきた用語や背景などを、別の枠で説明したコンテンツの事を表します。このような補足記事は、仮になくなったとしても、メイン記事そのものに影響はありませんので、aside 要素が適しています。そして、その記事に関連するコンテンツですので、その記事を表す article 要素の中で使うべきです。

プル・クォート

　プル・クォート（プル引用）とは、記事の中から印象的な一文を、読者に注目されるように大きめの文字で同じページに再掲したものを表します。日本の Web サイトで使われる事は多くないため、馴染みがないかもしれませんが、海外のニュース記事やブログ記事では、しばしば使われます。

　プル・クォートは、日本でも雑誌などの紙媒体では、よく使われる表現手法です。時には、見出しより大きく目立つ文字で表現されることもあります。そのため、そのページを開いたときに、最も目にうつりやすいコンテンツとなります。

　ただ、プル・クォートは、大きく目立つように表示されていますが、決して、見出しでもなければ、本文でもありません。そのため、仮に削除しても記事の内容を損なうものではありませんので、aside 要素が適しています。プル・クォートも、その記事に関連するコンテンツですので、その記事を表す article 要素の中で使うべきです。

　実は、これまでプル・クォートのマークアップには問題がありました。プル・クォートは、セマンティクス上、本文と違いがなかったからです。CSS を使って、見た目だけをプル・クォートらしく表現したとしても、それは、あくまでも人が見た場合にしか役に立ちません。

　検索エンジンのロボットや、スクリーン・リーダーのような支援テクノロジーから見れば、プル・クォートは、本文の中に組み込まれた通常の文章に見えてしまいます。スクリーン・リーダーで本文を読み上げた場合、当然、プル・クォートの部分も読み上げられるわけですが、別の場所ですでに存在している文章を、文脈とは関係がない場所で読み上げられることになってしまいます。

　HTML5 では、もともとは、このようなコンテンツを区別する事が出来るようにするために、aside 要素を導入したと言えます。

ショッピング・サイトのリコメンド・リスト

　よく、ショッピング・サイトでは、ある商品のページに、それに関連するお勧めの商品の紹介を掲載する事があります。例えば、Amazon の「この商品を買った人はこんな商品も買っています」や「よく一緒に購入されている商品」という欄などです。

　これらのコンテンツは、メインの商品の説明ではありませんので、たとえ、これらのコンテンツがなかったとしても、メインの商品の説明が損なわれるわけではありません。しかし、意図的に、メインの商品と関係がある情報として選ばれたコンテンツです。そのため、これらのコンテンツには aside 要素が適しています。そして、メインのコンテンツを表す section 要素や article 要素の中に入れるのが適切と言えます。

利用シーン③　Web 制作者の意図

　aside 要素の利用シーンをいくつか紹介しましたが、これらは、あくまでも個人的な考え方でしかありません。aside 要素を使うかどうかの判断は、制作者側の意図に依存します。そのため、aside 要素を使うべきコンテンツというものを明確に定義する事はできません。そして、これが、aside 要素の定義を分かりにくくしていると言えるでしょう。

　基本的には、あなたが、そのコンテンツがどのように扱われたいと思っているかによって、aside 要素を使うべきか、使わざるべきかが決まるのです。その典型的な例を見てみましょう。

　これは、ブログ記事と、それに対して投稿されたコメントのマークアップ例です。コメント欄全体を aside 要素で囲んでいます。これは、ブログ運営者が、コメントは記事の本文とは直接的に関係がないだけでなく、自ら書いた文章でもないため、記事本文との関連性を薄めたかったという意図が現れている事になります。

　もし、ブログ記事へのコメントは、そのブログにとって非常に重要なコンテンツと判断するのであれば、aside 要素ではなく、section 要素などを使うのが良いでしょう。

　このように、Web 制作者側の意図によって、同じコンテンツでも、aside 要素を使う場合と、使わない場合が想定され、一概に aside 要素を使うべきかどうかを決める事はできません。Web コンテンツを作る際には、個々のコンテンツの重要性や意味を十分の考慮してマークアップする必要があります。