aside

提供: ASCII.jp HTMLリファレンス

ver.9~ ver.7~ ver.14~ ver.5.1~ ver.11.5~
意味 補足的な情報
読み方 アサイド

カテゴリー

フロー・コンテンツ、セクショニング・コンテンツ

親にできる要素/カテゴリー

フロー・コンテンツが期待される場所

子にできる要素/カテゴリー

フロー・コンテンツ

<aside 属性="値">~</aside>

グローバル属性

accesskey,class,contenteditable,contextmenu,dir,draggable,hidden,id,lang,spellcheck,style,tabindex,title

説明

 aside要素は、前後の要素とある程度の関連はあるものの、その部分だけを分離できると考えられるような補足的な情報を示します。
 例えば、ブログの記事のページで、サイドバーにその記事に関連する情報を載せるような場合に、aside要素が適しています。

サンプル

(body要素の内部のみ掲載)

<article>
  <h1>今日の昼食</h1>
  <p>今日の昼は、〇〇庵でとんこつラーメンを食べました。<br />こってりしていて美味しかったです。</p>
  <aside>
    <h2>関連情報</h2>
    <p><a href="map.html">〇〇庵の地図</a></p>
  </aside>
</article>

サンプル実行画像

よくある間違い、勘違い

 文書のメインコンテンツに対応する要素の中でaside要素を使う場合、ある程度関連性がある文章を入れるようにします。
 一方、メインコンテンツの外でaside要素を使う場合、メインコンテンツとの関連性はそれほど重要ではなく、ページ全体との関連があれば良いのです。

Powered by Web Professional

目次