HTML & CSS - aside タグ

基本的な使い方

aside タグは、本文とは独立した補足的な情報を含むセクションです。例えば、メインとなるコンテンツの補足、脚注、用語説明などです。広告もこのタグに含まれます。aside タグの基本的な書き方は、以下のようになります。

<!-- メインコンテンツ -->
<p> ... </p>

<!-- 補足的な情報 -->
<aside>
    <p> ... </p>
</aside>
aside タグの基本的な書き方

HTML5 ではセクショニング・コンテンツ要素を用いて文書構造を組み立てます。セクショニング・コンテンツ要素とは navarticlesectionaside を指します。それらの要素で文書構造を組み立てると、以下のような形になります。

HTML のセクショニング
セクショニングの例
nav
nav タグは、ナビゲーションリンクを含むセクションです。例えば、グローバルナビゲーション、パンくずリスト、目次などで用いられます。
article
article タグは、それだけでコンテンツが完結するひとつのセクションを表します。例えば、ニュースの記事、ブログのエントリ、フォーラムでの投稿など独立した内容に対して使用します。
section
section タグは、汎用的なセクションとして用いられます。このセクションの中には、必ず見出しタグが必要になります。
aside
aside タグは、本文とは独立した補足的な情報を含むセクションです。例えば、メインとなるコンテンツの補足、脚注、用語説明などです。広告もこのタグに含まれます。

使用上の注意

aside タグは、情報を補足するために使用します。そのため、装飾や本文とは無関係のコンテンツに対して aside タグを使用するべきではありません。

また aside タグはブロック要素であるため、本文中に登場する補足的な情報に対しても使用するべきではありません。以下は、不適切な例です。

<!-- 不適切な例 -->
<p> HTML(<aside> Hyper Text Markup Language </aside>)とは ... </p>
aside タグの不適切な例

サイドバーや広告に使用

aside タグは、情報を補足する以外にサイドバーや、広告に対しても使用されます。

<main class="main-content">
    ...
</main>
    
<aside class="sidebar">
    ...
</aside>
サイドバーや広告に使用

ページ内で複数回の使用が可能

aside タグは、ページの中で複数回使っても問題ありません。

<!-- メインコンテンツ -->
<p> ... </p>

<!-- 補足的な情報 -->
<aside>
    <p> ... </p>
</aside>

<!-- メインコンテンツ -->
<p> ... </p>

<!-- 補足的な情報 -->
<aside>
    <p> ... </p>
</aside>
aside タグはページ内で複数回の使用が可能

外部リンク