<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>