どんなタグ？
補足的なセクションを表す場合に
この<aside>タグを使う

<aside>
  <h2>関連リンク</h2>
  <ul>
    <li><a href="#">架空旅館</a></li>
  </ul>
</aside>

どのカテゴリに属しているの？

aside要素は フロー・コンテンツと、セクショニング・コンテンツというコンテンツ・カテゴリに属しているタグです。

梱包できるタグは？

aside要素に梱包できる要素（コンテンツ・モデル）は、フロー・コンテンツです。
つまり、フロー・コンテンツというカテゴリに属しているタグなら梱包可能です。

使い所によく悩むタグです。

どうやって使うの？
補足的なコンテンツを、
<aside>タグで挟むだけ。

使い方

<aside>補足的なコンテンツ</aside>

<aside>
 <h2>関連記事一覧</h2>
 <ul>
  <li><a href="#">関連記事A</a></li>
  <li><a href="#">関連記事B</a></li>
  <li><a href="#">関連記事C</a></li>
 </ul>
</aside>

どこでも使えるの？

aside要素は フロー・コンテンツもしくはセクショニング・コンテンツが配置できるところならどこでも使えます。

気をつけることは？

aside要素は、あくまで文章構造のアウトラインを表現するためのもので、レイアウト目的で使用するものではないので注意して下さい。

補足コンテンツを伝えるためのタグです。

使える属性は？
グローバル属性とイベント属性です。

<aside> タグには、どの要素にでも使えるグローバル属性とイベントハンドラ属性が使えます。
但し、イベントハンドラ属性を使用することは稀です。

基本的にグローバル属性しか使いません。

サンプルが見たい
<aside>タグを使ったサンプルを
いくつか紹介。

<aside>タグを使ったサンプルを紹介します。

基本的な<aside>タグのサンプル

<aside>
 <h1>最新の記事</h1>
 <ul>
  <li><a href="#">フリーランスにおすすめの無料ツール</a></li>
  <li><a href="#">クラウドソーシングの比較</a></li>
  <li><a href="#">フリーランスの確定申告</a></li>
 </ul>
</aside>
<aside>
 <h1>カテゴリー一覧</h1>
 <ul>
  <li><a href="#">プログラミング</a></li>
  <li><a href="#">動画編集</a></li>
 </ul>
</aside>

ブログページでは、サイドバーにある各記事への導線部分によく使います

デフォルトスタイルは？
ブロック要素になっている。

一般的なブラウザでaside要素を表示した場合、デフォルトスタイルによりブロック要素が指定されています。 具体的には、下記のCSSと同等のスタイルが適用されます。

aside {
  display: block;
}
CSS
Copy

aside要素はレイアウト目的で使用しないので、特に問題ないです。

対応ブラウザは？
基本的にどのブラウザでも
大丈夫。

<aside>タグは HTML5以降で利用可能で、主に以下のブラウザが対応しています。

Internet Explorar

Internet Explorar 9 ~

Edge

Edge 12 ~

Google Chrome

Google Chrome 5 ~

Firefox

Firefox 4 ~

Safari

Safari 5 ~

Opera

Opera 11.5 ~

どのブラウザでも問題ありません。