aside要素
aside要素は、メイン・コンテンツを補足するセクションであることを示す要素。
| カテゴリー | フロー・コンテンツ。セクショニング・コンテンツ。パルパブル・コンテンツ。 |
|---|---|
| コンテキスト | フロー・コンテンツを内包できる要素内で使用できる。 |
| コンテンツ・モデル | フロー・コンテンツを内包できる。 ただし、main要素を子孫要素に持つことはできない。 |
| 属性 | グローバル属性。 |
| ブラウザ対応 |      |
要点
- aside要素は、補足セクションであることを示す要素である。
- aside要素内には、補足情報、余談などを配置する。
- 括弧で括るような挿入句を、aside要素で括る必要はない。
- aside要素は、セクショニング・コンテンツである。新たなセクションを区画する。
- aside要素は、HTML5にて新たに導入された要素である。
補足セクションに含める主な内容
aside要素内に配置する具体的な例。
- 補足情報
- 余談
- 用語解説
- サイドバー
- 広告エリア
- 検索フォーム
- カテゴリアーカイブ
- 新着記事 ・・・等々。
サンプルコード
<aside> 補足情報。 </aside>
用語解説
記事の中で、用語の解説を補足する例。
<article> <h2>記事セクション</h2> <p>記事の内容。</p> <aside> <p>ところで、セクションとは、・・・・。</p> </aside> </article>
サイドバー
スタイルを指定していないので表示上はサイドではないが・・・。
<body> <header> <h1>ページタイトル</h1> <p>ページの概要。</p> </header> <article> <h2>記事セクション</h2> <p>記事の内容。</p> </article> <aside> <nav> <h2>新着記事</h2> <ul> <li><a href="">記事Ａ</a></li> <li><a href="">記事Ｂ</a></li> <li><a href="">記事Ｃ</a></li> </ul> </nav> </aside> <footer> <p>ドキュメントのフッター。</p> <p>(C) 2014 作者</p> </footer> </body>
サンプル
HTMLソースコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> </head> <body> <header> <h1>ページタイトル</h1> <p>ページの概要。</p> </header> <article> <h2>記事セクション</h2> <p>記事の内容。</p> <aside> <p>ところで、セクションとは、・・・・。</p> </aside> </article> <aside> <nav> <h2>新着記事</h2> <ul> <li><a href="">記事Ａ</a></li> <li><a href="">記事Ｂ</a></li> <li><a href="">記事Ｃ</a></li> </ul> </nav> </aside> <footer> <p>ドキュメントのフッター。</p> <p>(C) 2014 作者</p> </footer> </body> </html>