HTML5の要素「aside」の使い方

HTML5で新たに追加された要素aside
今更にはなりますが、使用方法を再確認したのでメモ。

aside要素の基本の使い方

aside要素は、メインのコンテンツの補足情報であることを示す。
内容がメインコンテンツと関係が深い場合はaside要素を使用すべきではない。

その内容がなくてもメインコンテンツが成り立つかどうか、という点がひとつの判断材料になる。
メインコンテンツに不可欠な内容に対しては、aside要素の使用は適切でない。

具体例としては、サイドバーのコンテンツなどに用いられることが多い。

aside要素の使用例

...
<article>
	<h1>aside要素の使い方と使用例</h1>
	<p>...</p>
</article>
<aside>
	<h1>aside要素についての余談</h1>
	<p>asideは和訳すると「余談」とか「傍に」といった意味になるので、
	それを意識しておくと理解がしやすいかもしれません。</p>
</aside>
...

aside要素のコンテンツモデル

コンテンツカテゴリー

  • フローコンテンツ
  • セクショニングコンテンツ
  • パルパブルコンテンツ

含むことができるカテゴリー

  • フロー・コンテンツ

留意すること

  • section要素はaddress要素の子孫要素として配置してはならない。