補足情報を表す

aside

< aside 【アサイド 】 >〜</aside >

aside要素は補足や脚注、用語の説明など、本筋とは別に触れておきたい内容、または本筋から分離して問題のない内容を含んだセクションを表します。広告もこれに含まれます。逆に、抜き取ってしまうと本筋の意味が通らなくなる内容はaside要素にするべきではありません。

カテゴリー ・セクショニングコンテンツ
・パルパブルコンテンツ
・フローコンテンツ
コンテンツモデル フローコンテンツ
使用できる文脈 フローコンテンツが期待される場所
カテゴリーとコンテンツモデル

使用できる属性

グローバル属性

すべての要素で使用できる属性です。
グローバル属性とイベントハンドラ属性

サンプルコード

<article>
  <p>当店のパンケーキではベーキングパウダー（<a href="#note01" title="用語解説：ベーキングパウダー">※1</a>）を使用していません。</p>
</article>
<aside>
<section>
  <h1>用語解説</h1>
  <h2 id="note01"> ベーキングパウダー</h2>
  <p>重曹を主な成分とした膨張剤。「膨らし粉」とも呼ばれる。</p>
</section>
</aside>

ポイント

  • aside 要素はセクショニングコンテンツなのでアウトラインを生成しますが、見出しがないセクションとなってもその性質上、特に問題はないでしょう。

使用例ページ内のナビゲーションをまとめる

<aside><nav>〜</aside></nav>

ブログなどによく配置されている各記事への導線を、aside要素とnav要素を組み合わせることで、ひとつのセクションとすることも可能です。以下のように、最新記事の一覧やカテゴリーの一覧といったリンクのまとまりをnav要素でマークアップし、それぞれのナビゲーションを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/">お知らせ</a></li>
      <li><a href="/category02/"> 店長日記</a></li>
    </ul>
  </nav>
</aside>

関連記事