<aside></aside>

更新日
仕様 HTML Living Standard
分類 フロー・コンテンツ / セクショニング・コンテンツ / パルパブル・コンテンツ
利用場所 セクショニング・コンテンツが置ける場所
内容 フロー・コンテンツ

aside要素は、メインコンテンツから分離された補足的なセクションを表します。仮にそのセクションを取り除いたとしても、メインコンテンツには影響が出ない部分で使用します。


<aside>

補足的なセクションを表します

</aside>

aside要素は、本文には関係しているものの、本筋からは外れているコンテンツを表す際に使用します。例えば、次のようなコンテンツで使用できます。

  • 補足情報(本文を補足する記事・情報)
  • 余談(本筋から外れた余談・雑談・豆知識)
  • 用語説明(本文中の用語等に対する説明)
  • 括弧書きで表される補足等は、aside要素の使用対象にはなりません。(その補足は本文の一部であるため)← 例えばこれのこと

上記の他、サイドバー広告エリアなどでの使用も考えられます。

旧HTMLからの変更点
  • HTML5:aside要素が定義されました。
  • HTML LS:利用場所が微妙に変わりました。(フロー・コンテンツが置ける場所 → セクショニング・コンテンツが置ける場所)

使用例

余談の部分で使用した例

<article>

<h2>aside要素について</h2>

<p><dfn>aside要素</dfn>は、メインコンテンツから分離された補足的な ...</p>
...


<aside>

<p>余談ですが、この「メモ」のセクションもaside要素でマークアップされています。</p>

</aside>

</article>

サイドバーで使用した例

<aside>

<nav>

<section>
<h4>カテゴリー</h4>
<ul>
<li><a href="category_1.html">HTML</a></li>
<li><a href="category_2.html">CSS</a></li>
<li><a href="category_3.html">日常</a></li>
</ul>
</section>

<section>
<h4>最近の記事</h4>
<ol>
<li><a href="entry_13.html">スマホの再起動について(2)</a></li>
<li><a href="entry_12.html">HTMLを勉強中です</a></li>
<li><a href="entry_11.html">スマホの再起動について(1)</a></li>
</ol>
</section>

</nav>

</aside>