HTML5における<aside>タグの使い方

今回は、HTML5における<aside>タグの使い方をご紹介します。

<aside>タグは、補足や脚注、用語の説明などを含めたセクションに利用するタグです。本文の内容とは関係ないけど、書いておきたいことや、本文になくても問題のない広告なども、このセクションに含まれます。つまり、本文になくてはならない部分には<aside>タグは利用しません。

HTML5における<aside>タグの使い方

記述例を見てみましょう。「これはテストです」という文章のテストという単語に※1の注釈を入れてリンクさせ、テストという単語の注釈を入れています。注釈の部分は先ほども話したように、なくても本文には影響しない内容なので、aside要素とします。

<article>
  <p>これはテスト(<a href="#annotation1">※1</a>)です</p>
</article>
<aside>
<section>
  <h1>※1</h1>
  <h2 id="annotation1">テスト</h2>
  <p>事物の良否・性能などを試して調べること。試験。実験。「ブレーキを―する」「―放送」「―飛行」</p>
</section>
</aside>

表示例です。

screenshot 235

aside要素はグローバル要素と呼ばれるもので、HTMLのすべての要素で指定することができます。また、テキストなどの内容があるコンテンツを表すフローコンテンツに分類されます。