<aside>補足的な情報を示す

<aside>タグは、HTML文書のメインコンテンツには含まれない、または関連性の低い補足的な情報のセクションである事を示します。 例えばサイドバーや広告、その他メインコンテンツ外のセクションなどに対して使用します。

また、ここでいう補足的な情報とは、前後の要素とある程度の関連があり、かつその部分だけを分離できると考えられるような部分の事です。 ですので、主要な記事とまったく関係ない記事というわけではなく、article要素などの主要な記事内容を補足し、付随するような内容に対して<aside>タグを使用するのが適しています。

なおメインコンテンツに対応する要素内で<aside>を使用する場合、ある程度関連性がある文章を入れるようにします。 メインコンテンツ外で<aside>を使用する場合は、ページ全体との関連性を持たせます。 この場合はメインコンテンツとの関連性はそれほど重要ではありません。

HTML5での変更点

aside要素は、HTML5で新しく追加されました。

書式

  • <aside 属性="値">~</aside> ……… 補足的な情報を示す

使用した時の例

<article>
 <h4>htmlタグ</h4>
 <p>htmlについて勉強中</p>
   <aside>
    <h5>関連情報</h5>
    <p><a href="/hp-web/html5/">HTML5タグリファレンス</a></p>
   </aside>
</article>

ブラウザ上の表示例

対応ブラウザなどのデータ

形式 <aside>~</aside> カテゴリ フローコンテンツ, セクショニングコンテンツ
親要素 フローコンテンツが期待される場所 子要素 フローコンテンツ
開始タグ 必須 終了タグ 必須
グローバル属性 accesskey / class / contenteditable / contextmenu / dir / draggable / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer9~ , Google Chrome14~ , Firefox7~ , Opera11.5~ , Safari7~