HTML の <aside> 要素は、文書のメインコンテンツと間接的な関係しか持っていない文書の部分を表現します。サイドバーやコールアウトボックスなどを表現するためによく使われます。
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力していただけるのであれば、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
| コンテンツカテゴリ | フローコンテンツ、区分コンテンツ、知覚可能コンテンツ |
|---|---|
| 許可されている内容 | フローコンテンツ |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 | フローコンテンツを受け入れるすべての要素。<aside> 要素は <address> 要素の子孫要素として配置してはならない。 |
| 暗黙の ARIA ロール | complementary |
| 許可されている ARIA ロール | feed, none, note, presentation, region, search |
| DOM インターフェイス | HTMLElement |
属性
この要素にはグローバル属性のみがあります。
使用上の注意
- 文章中の括弧書きについては、文章の主要な流れに属するものであるといえますので、これをタグ付けするために
<aside>要素を使用しないでください。
例
<aside> の使用
このれは <aside> を使用して記事の中のある段落をマークアップします。この段落は記事の主要な内容と間接的な関係しかありません。
<article>
<p>
The Disney movie <cite>The Little Mermaid</cite> was
first released to theatres in 1989.
</p>
<aside>
<p>
The movie earned $87 million during its initial release.
</p>
</aside>
<p>
More info about the movie...
</p>
</article>
仕様書
| 仕様書 | 状態 | 備考 |
|---|---|---|
| HTML Living Standard <aside> の定義 |
現行の標準 | |
| HTML5 <aside> の定義 |
勧告 |
ブラウザーの互換性
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
Update compatibility data on GitHub
| デスクトップ | モバイル | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
aside | Chrome 完全対応 5 | Edge 完全対応 12 | Firefox 完全対応 4 | IE 完全対応 9 | Opera 完全対応 11.1 | Safari 完全対応 5 | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 4 | Opera Android 完全対応 11.1 | Safari iOS 完全対応 4.2 | Samsung Internet Android 完全対応 あり |
凡例
- 完全対応
- 完全対応