HTML要素辞書 by Sentaro

<aside>

アサイド（Aside）要素。主要コンテンツと間接的に関連するが、独立した補足的なコンテンツを表します。

info

概要

<aside> 要素は、ドキュメントの主要コンテンツとは別に存在するコンテンツを表します。これは、主要コンテンツの補足情報、用語解説、関連リンク、広告、著者の略歴など、主要コンテンツがなくても理解できる独立したコンテンツに使用されます。
一般的に、サイドバーとしてレイアウトされることが多い要素です。

play_circle

デモ (静的表示)

HTML (Source)

<article> <h2>主要記事のタイトル</h2> <p>記事の主要な内容がここにあります...</p> <aside> <h3>この記事の補足情報</h3> <ul> <li><a href="#">関連資料へのリンク</a></li> <li>著者の簡単な紹介</li> </ul> </aside> </article>

Preview (Result)

主要記事のタイトル

記事の主要な内容がここにあります...

list

属性 (Attributes)

属性名	説明
グローバル属性	全てのHTML要素で使用可能なグローバル属性のみをサポートします。固有の属性はありません。

code

実用例

1. 主要コンテンツの関連情報としての使用

<main>
 <p>メインの記事の内容...</p>
 
 <aside>
  <h3>関連コンテンツ</h3>
  <ul>
   <li>別の記事へのリンク</li>
  </ul>
 </aside>
</main>

2. 広告ブロックとしての使用

<article>
 <h1>ブログ記事</h1>
 <p>...</p>
</article>

<aside class="ad-container">
 <p>広告エリア</p>
 <img src="ad.png" alt="広告バナー">
</aside>

3. ページ全体のサイドバーとしての使用

<body>
 <main>...</main>
 
 <aside role="complementary">
  <h2>サイトナビゲーション</h2>
  <nav>
   <ul>
    <li>ホーム</li>
    <li>about</li>
   </ul>
  </nav>
 </aside>
</body>

lightbulb

知っておくべき重要事項

segment

セマンティクス（意味）
<aside> は、主要コンテンツから独立した補足情報のために存在します。単なるサイドバーのレイアウトのために使うべきではありません。例えば、ナビゲーションメニュー（サイト全体に関わるもの）は、<nav>要素の使用がより適切です。

accessibility_new

アクセシビリティ
多くのブラウザやスクリーンリーダーは、<aside>要素をランドマークロールの complementary（補足）として扱います。これにより、利用者が主要コンテンツと補足コンテンツを区別しやすくなります。

私について利用規約プライバシーポリシー