<aside>: ASIDE 要素
最終更新：2026-10-13
<aside>ASIDE 要素
メインコンテンツと間接的な関連を持つ内容（サイドバー・注記・引用・広告など）を表します。
| カテゴリ | セマンティック |
|---|---|
| コンテンツモデル | フローコンテンツ |
| 許可される親要素 | フローコンテンツを受け入れる要素 |
| 閉じタグ | 必要 </aside> タグ |
| ステータス | 標準 |
📝 構文
<aside>補足コンテンツ</aside>▶ サンプル
下のコードを編集して、playground でリアルタイム結果を確認：
🌐 ブラウザサポート
| ブラウザ |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <aside> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| すべての主要ブラウザでサポート | |||||
ヒント： aside は必ずしも視覚的に横に置く必要はありません。重要なのは意味上の間接的な関連性です。
❓ よくある質問
Qaside と div の違いは何ですか？
A
<aside> には明確な意味があります。「メインコンテンツに間接的に関連する部分」（サイドバー・広告枠・用語解説・関連記事）です。<div> は意味を持ちません。判断基準：この部分を削除してもメインコンテンツが完全か？完全なら aside が適します。Qaside は article の内側と外側のどちらに置くべきですか？
Aどちらも正当ですが、意味が違います。
<article> の内側なら「その記事に関連する補足」（文中の注釈や用語解説）、外側なら「ページ全体に関連する補足」（サイトのサイドバーなど）です。内容の帰属で階層を決めましょう。Qaside はナビゲーションに適していますか？
Aサイト全体のサイドナビは
<nav> の担当です。<aside> は、目次・タグクラウド・おすすめ記事など、メインコンテンツと弱く関連する非ナビゲーション内容に向いています。それらは「補足」であって「ナビゲーション」ではないからです。🏷️ 関連タグ
💡 関連ケース
今後さらにケーススタディを追加予定です。
📚 関連チュートリアル
