aside 要素本文から独立可能な補足や脚注を表す
aside 要素は、その前後の内容には関係はしているものの、補足、脚注、欄外の用語説明など、本筋とは別に触れておきたいような内容を含んだセクションを表します。広告などもこれに含まれるでしょう。
aside 要素は文書の内容から分離されたものとして見なすことができ、文書内の主な内容から分離しても問題ない内容を含めます。逆に言えば、文書からこの項目を抜き取ってしまうと本筋の意味が通らなくなってしまう内容は aside 要素に含めるべきではありません。
aside 要素はアウトラインを生成しますが、見出しがないセクションとなってもその性質上、特に問題はないと思われます。
aside 要素の仕様
- カテゴリ
- コンテンツモデル
- この要素を使用できる文脈
フロー・コンテンツが期待される場所
- この要素で使用できる属性
aside 要素のサンプルソース
<!-- Blog の記事に補足を付けます --> <article> <header> <h1>ブログの記事</h1> <p><time datetime="2013-06-12T10:30:42+09:00">公開日： 2013年6月12日</time></p> </header> <p>本文</p> <p>...</p> <footer> <address> 著者： <a href="mailto:japan@example.com">日本太郎</a> </address> </footer> </article> <aside> <h1>こぼれ話</h1> <p>この記事を書くときに色々と調べ物をしていたら、本の間から忘れていたへそくりが見つかりました。</p> </aside>
<!-- 記事内の用語を欄外で補足する例 --> <article> <header> <h1>サッカーにおけるフォーメーション</h1> <p><time datetime="2013-06-12T10:30:42+09:00">公開日： 2013年6月12日</time></p> </header> <p>サッカーにおけるフォーメーション（<a href="#note01" title="用語解説：フォーメーション">※1</a>）は、…</p> <p>...</p> <footer> <address> 著者： <a href="mailto:japan@example.com">日本太郎</a> </address> </footer> </article> <aside> <h1>用語解説</h1> <h2 id="note01">フォーメーション</h2> <p>サッカーにおいて戦術の基本となる選手の配置を示します。</p> <h2 id="note01">コーナーキック</h2> <p>サッカーの試合においてコーナーアークからのキックによりプレーを再開するためのルールです。</p> </aside>
<!-- ページ内のナビゲーションをまとめるような使い方の例 --> <aside> <nav> <h1>最近の記事</h1> <ul> <li><a href="entry01.html">記事タイトル</a></li> <li><a href="entry02.html">記事タイトル</a></li> <li><a href="entry03.html">記事タイトル</a></li> </ul> </nav> <nav> <h1>カテゴリ一覧</h1> <ul> <li><a href="/category01/">日記t</a></li> <li><a href="/category02/">サッカー</a></li> </ul> </nav> </aside>
<!-- 広告をマークアップした例 --> <aside> <h1>広告</h1> <noscript><p>JavaScript が有効な場合、この場所には広告が表示されています。</p></noscript> <div> <script> sample_ad_client = "ca-pub-0000000000"; sample_ad_slot = "00000000"; sample_ad_width = 300; sample_ad_height = 250; </script> <script src="//example.com/ads.js"></script> </div> </aside>
主要ブラウザの対応
| IE11 | ○ |
|---|---|
| Edge（EdgeHTML） | ○ |
| Edge（Chromium） | ○ |
| Chrome | ○ |
| Firefox | ○ |
| Safari | ○ |
| iOS Safari | ○ |
| Android Chrome | ○ |