aside要素
- カテゴリー：フローコンテンツ、セクショニングコンテンツ
- この要素が使える文脈：フローコンテンツが予想される場所
- コンテンツモデル：フローコンテンツ
aside（アサイド）要素は、「そのコンテンツに関係はしているものの、切り離せる内容」に使用します。典型的な用途に、サイドバー、補足記事、広告などがあります。補足記事とは、本文と関連性の薄い解説文のことで、本題から一旦脱線するような内容と考えられます。ただし、「括弧で囲まれたテキスト」のことではありません。この記事でも括弧で囲まれた解説が度々登場しますが、記事にとって必要なものであり、取り除いてしまうと理解しづらくなるでしょう。
aside要素は、どの要素の子要素になるかで意味が変わってくるので、使用する場所を特によく考える必要があります。ブログに掲載する広告を例に、ソースコードで見てみましょう。
サンプル1
<article>
<h1>新しいデジカメを買っちゃいました！</h1>
<p>ペンの最新機種です！やっぱりいいですね！</p>
<p>自分で実際に使ってみて凄く良かったので、紹介しようと思いました！</p>
<aside><a href="http://example.com/example_item/hamashun-22/"><img src="/img/ad/banner1.png" alt="新型ペン、登場" /></a></aside>
</article>
サンプル2
<article>
<h1>新しいデジカメを買っちゃいました！</h1>
<p>ペンの最新機種です！やっぱりいいですね！</p>
<p>自分で実際に使ってみて凄く良かったので、紹介しようと思いました！</p>
</article>
<aside><a href="http://example.com/ad/"><img src="/img/ad/banner2.png" alt="ブログ新規登録受付中！" /></a></aside>
サンプル1の広告は、本文に関連した内容であり、著者自らが設置したアフィリエイトリンクです。この場合、広告は著者にとってコンテンツの一部なので、本文のarticle要素の中にaside要素が記述しています。
一方でサンプル2の広告は、本文と関係のない内容なので（恐らく、ブログシステムが自動で吐き出す広告でしょう）、article要素の外側にaside要素を記述しています。
HTML5以前（たとえば上記のソースコードではarticle要素とaside要素が、div要素などに置き換わった場合）では、広告を記事部分に含める否かは、デザインに合わせて決定されるケースがありました。HTML5では、文脈に合わせて決定する必要があります。
サンプルでは広告を例にしましたが、サイドバーや補足記事でも同様です。
aside要素に見出しは必要か
サンプルコードのaside要素には見出しがありません。aside要素もセクションを明示する要素ですが、見出しが無い場合はアウトラインにはデフォルトの見出しが適用されます。デフォルトの見出しは、仕様書では「Sidebar」となっていますが、実際にはユーザーの言葉・好み、ユーザーエージェント開発者の好み、ページの言語、などによって異なる可能性があります。
【参考】
User agents should provide default headings for sections that do not have explicit section headings.
引用：4.4 Sections ― HTML5These default headings ("Untitled document", "Navigation", "Sidebar") are not specified by this specification, and might vary with the user's language, the page's language, the user's preferences, the user agent implementor's preferences, etc.
