今回は、HTML5における<aside>タグの使い方をご紹介します。
<aside>タグは、補足や脚注、用語の説明などを含めたセクションに利用するタグです。本文の内容とは関係ないけど、書いておきたいことや、本文になくても問題のない広告なども、このセクションに含まれます。つまり、本文になくてはならない部分には<aside>タグは利用しません。
HTML5における<aside>タグの使い方
記述例を見てみましょう。「これはテストです」という文章のテストという単語に※1の注釈を入れてリンクさせ、テストという単語の注釈を入れています。注釈の部分は先ほども話したように、なくても本文には影響しない内容なので、aside要素とします。
1 2 3 4 5 6 7 8 9 10 |
<article> <p>これはテスト(<a href="#annotation1">※1</a>)です</p> </article> <aside> <section> <h1>※1</h1> <h2 id="annotation1">テスト</h2> <p>事物の良否・性能などを試して調べること。試験。実験。「ブレーキを―する」「―放送」「―飛行」</p> </section> </aside> |
表示例です。
aside要素はグローバル要素と呼ばれるもので、HTMLのすべての要素で指定することができます。また、テキストなどの内容があるコンテンツを表すフローコンテンツに分類されます。