定義と使い方

<aside>タグは
ページ内の主要コンテンツと直接的ではないものの間接的に関連した内容で構成される別個（aside、別途とする）の部分を示します。
このような部分は主にサイドバーまたは文書の内容に関連する追加情報を提供する別個の領域として表現されます。

基本例

HTML 
<!DOCTYPE html>
<html lang="ja">
    <head>
        <title>asideタグの例</title>
    </head>
    <body>
        <header>
            <h1>ウェブページのタイトル</h1>
        </header>
        <main>
            <article>
                <h2>主要コンテンツのタイトル</h2>
                <p>主要な内容…</p>
            </article>
        </main>
        <aside>
            <h3>付加情報</h3>
            <p>この領域は主要コンテンツに含まれていない別個の付加情報を表示します。</p>
        </aside>
        <footer>
            <p>© copyright ウェブページ</p>
        </footer>
    </body>
</html>

特徴

<aside>タグは主に文書の主要内容に関連する別個に分離された追加情報を提供するために使用する必要があり、文書の主要内容に含まれる内容を示す目的で使用してはなりません。

<aside>タグはページ内の主要コンテンツと間接的に関連する内容を示すために使用されます。
追加情報や補足コンテンツ、または本文と区別される別個の内容を含める場合に用いられます。ただし、このタグを主要コンテンツ自体の一部を示す目的で使用することは適切ではありません。

誤った使用例

次は<aside>タグの誤った使用方法の例として、以下のHTMLコードを確認します。

HTML 
<!DOCTYPE html>
<html lang="ja">
    <head>
        <title>asideタグの誤った使用法</title>
    </head>
    <body>
        <header>
            <h1>ウェブページのタイトル</h1>
        </header>
        <main>
            <article>
                <h2>主要コンテンツのタイトル</h2>
                <p>主要な内容…</p>
            </article>
        </main>
        <aside>
            <!-- 主要コンテンツの一部を示す目的で使用してはいけません。 -->
            <h3>小見出し</h3>
            <p>このページの主要内容の一部です。</p>
        </aside>
        <footer>
            <p>© copyright ウェブページ</p>
        </footer>
    </body>
</html>

上記の例では、<aside>タグが主要コンテンツの一部として使用されています。これは<aside>タグを正しく使用する方法ではありません。<aside>タグは主要コンテンツと間接的に関連する内容を示すために使用されるべきであり、主要コンテンツに直接含めてはいけません。

例

<aside>タグのさまざまな使用例の一部を見てみます。

ブログのサイドバー

HTML 
<article>
    <h1>ブログポストのタイトル</h1>
    <p>ブログの内容…</p>
</article>
<aside>
    <!-- ブログポストに関連する追加情報 -->
    <h2>関連ポスト</h2>
    <nav>
        <ul>
            <li><a href="#">ポスト1</a></li>
            <li><a href="#">ポスト2</a></li>
            <li><a href="#">ポスト3</a></li>
        </ul>
    </nav>
</aside>

コード補足説明
<nav>タグは、他のウェブページへ接続するリンクや、現在のウェブページ内のコンテンツへのナビゲーション(navigation)用リンクを含む領域を示します。

広告バナー

HTML 
<main>
    <h1>製品紹介</h1>
    <p>製品に関する詳細情報…</p>
</main>
<aside>
    <ins>
        <!-- 製品関連の広告バナー -->
        <img src="広告画像.jpg" alt="製品広告">        
    </ins>
</aside>

コード補足説明
<ins>タグは、文書に追加されたテキストの範囲や挿入(inserted)されたコンテンツを示すために使用されます。ここでは、ウェブページに挿入されたコンテンツの一種である広告コンテンツ領域を示します。

引用文

HTML 
<article>
    <h1>歴史的イベント</h1>
    <p>イベントに関する説明…</p>
</article>
<aside>
    <!-- 歴史的イベントに関連する引用文 -->
    <blockquote>
        <p>歴史はどのような状況でも経験されたものではなく、解釈されたものである。</p>
    </blockquote>
    <p>カール・ユーワース</p>
</aside>

コード補足説明
<blockquote>タグは、他の出典から引用された引用セクションを示します。

関連サイトリンク

HTML 
<nav aria-label="メインメニューです。">
    <ul>
        <li><a href="#">ホーム</a></li>
        <li><a href="#">サービス</a></li>
        <li><a href="#">ブログ</a></li>
    </ul>
</nav>
<aside>
    <!-- ウェブサイトの関連サイトリンク -->
    <h2>関連サイト</h2>
    <nav aria-label="関連サイトのメニューリンクです。">
        <ul>
            <li><a href="#">パートナー1</a></li>
            <li><a href="#">パートナー2</a></li>
            <li><a href="#">パートナー3</a></li>
        </ul>        
    </nav>
</aside>

上記の例では、サイトの「メインメニュー」と主要コンテンツとは別の補助メニューである「関連サイトメニュー」を区別するために、<aside>タグを使用しています。

上記の例では、追加されたコメントや説明は、<aside>タグが主要コンテンツとは独立して追加情報や補助コンテンツを提供する方法を示すために使用されていることを説明しています。

アクセシビリティに関する考慮事項

HTMLにおける「ランドマーク(landmark)」とは、ウェブページの構造を示し、ウェブアクセシビリティを向上させるために使用される要素を指します。これは、ユーザーがページを理解しナビゲーションするのに役立ち、スクリーンリーダーなどの支援技術を通じてレイアウトや構造を効果的に伝えることができます。

ランドマーク(landmark)については、ARIA Landmarks Exampleを参照してください。

<aside>タグは、ページの主要コンテンツ領域の補助（または付加）コンテンツ領域を示します。主要コンテンツと直接相互作用せず、補助的（または付加的）な役割を持つ内容を含めることができます。主にウェブページのサイドバーを表します。role属性の値はcomplementaryです。

このように、<aside>タグはウェブページにおいて、ページのレイアウトや構造を伝える上で重要な意味を持ちます。

role属性による<aside>タグの意味付け

もし<aside>タグを使用できない場合は、role属性を使って同じ意味を付与することもできます。

次は、<aside>タグを使用せず、特別な意味を持たない<div> タグにrole="complementary"を付与してランドマークとして使用する例です。

HTML 
<div role="complementary">
    <h2>Title for complementary area<h2> 
    .... complementary content area .... 
</div>

ブラウザの互換性の問題で<aside>タグを使用できない場合を除き、role="complementary"を使用するよりも、<aside>タグを使用してください。

注意点

<aside>は<address>の子要素になることはできません。

関連属性

<aside>専用の属性はありません。すべてのグローバル属性を使用できます。

技術的な文法のまとめ

asideタグの技術的な文法のまとめ
可能な親要素 <address>の子要素にはなれません。
暗黙的なrole属性の値 complementary
許可されるrole属性の値 feed, none, note, presentation, region, search

ブラウザ互換性

asideタグのブラウザ互換性
タグ
デスクトップ Chrome
Chrome
デスクトップデスクトップ Edge
Edge
デスクトップ Firefox
Firefox
Safari
Safari
<aside> 5 12 4 5

仕様書

asideタグの仕様書
仕様書
<aside> HTML Standard
#the-aside-element

参考資料

関連項目