aside を見直す
これは、以前の article の記事のアップデート版だ。仕様が変更され、aside にあまり重要でないコンテンツを入れても良いことになったのだ。そのコンテキストは、それが article の中にあるかどうかに依存するという点が変わったのだ。
HTML5 仕様はまだ完了していないので、良い点を取り入れたり、良くない点を取り除いたりして、変更されていくはずだ。aside、これは分かりづらい要素だが、ウェブ開発コミュニティからのフィードバックに基づいて見直され、ちょっとした変更が加えられた。この記事では、その変更点を見ていこう。
先生！先生！これは以前に読んだ気がします！
ここ HTML5Doctor では、確かに、すでに “aside 要素を理解しよう“ で aside について議論した。もし、あなたが私と直に会っていたとしたら、その定義についての私の叫びに打ちのめされたと感じただろう。その定義では、aside はその前後のコンテンツに間接的に関連するコンテンツに使うべき、と言っていた。例えば、内容に関連したリンクや解説などだ。
この要素は、あまり重要でないコンテンツを入れるのには、ふさわしくないと考えられていた。あまり重要でないコンテンツとは、記事に特化したものというよりかは、サイトに関連したコンテンツで、“サイドバー” としてよく知られているものが典型だろう。ここやそれ以外のコメントを見れば、この定義がコミュニティに受け入れられず、“あまり重要でないコンテンツには何を使えば良いのか？” という議論がわき起こったと分かるだろう。
再定義された aside
aside は、あまり重要でないコンテンツに使っても良いことになった。たとえば、ブログロール、補助的なナビゲーション、そして、ページに関連するのであれば広告にも使って良いのだ。とりわけ article 要素の中で使うときは、例えば解説など、その記事に関連したコンテンツとするべきだ。aside を使うときは、これらのコンテキストの変更点に注意してほしい。
この例で示しているのが aside のベストな使い方となるだろう。
<body>
<header>
<h1>私のブログ</h1>
</header>
<article>
<h1>私のブログの投稿</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<aside>
<!-- この aside は article の中なので、パーサーは、
この aside のコンテンツは、その article そのものに直接的に関係したものだと
解釈するはずだ。 -->
<h1>解説</h1>
<dd>
<dt>Lorem</dt>
<dd>ipsum dolor sit amet</dd>
</dd>
</aside>
</article>
<aside>
<!-- この aside は記事の外に出してある。そのため、そのコンテンツは
ページには関係するが、上の articleに深く関係している訳ではない。 -->
<h2>ブログロール</h2>
<ul>
<li><a href="#">私の友達</a></li>
<li><a href="#">私の他の友達</a></li>
<li><a href="#">私の親友</a></li>
</ul>
</aside>
</body>
まとめ
これは、あまり重要でないコンテンツに aside を使うことができるようになったということを意味する。aside 、そして、あまり重要でないコンテンツとは、必ずしも “サイドバー” を意味しているわけではないということに注意してほしい。コンテンツのスタイルのために、この要素を使ってはいけないのだ。もし、メインのコンテンツほど重要な役割を持たないコンテンツだけれども、それがページや記事に関連しているなら、ビジュアル・デザインの有無にかかわらず、aside が適切だ。