最終更新日

aside要素

周囲のコンテンツと関連性はあるものの、本筋からは外れているようなコンテンツを示します。印刷物であれば補足説明文、引用の抜粋、脚注、関連広告など、空いているスペースを埋めるために使われるようなコンテンツが該当します。また、ブログのサイドバーに表示されるリンク一覧やTwitterメッセージなどもaside要素のコンテンツに含まれます。aside要素は、Flowコンテンツの記述箇所で使用できます。

補足説明的な情報でも、ドキュメントの本筋の一部となるようなコンテンツの場合には、aside要素は使いません。

HTML5での変更点
・aside要素は、HTML5で追加された新しい要素です。
カテゴリ タグの省略 親要素 子要素
Flowコンテンツ
Sectioningコンテンツ
省略不可 Flowコンテンツを子にできる要素 Flowコンテンツ
属性 説明
グローバル属性 - -
イベント属性 - -
サンプルコード
<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>エビフィレオ</title>
  </head>
  <body>
    <h1>エビフィレオ</h1>
    <p>マクドエイドの新メニュー「エビフィレオ」の紹介です。</p>
    <p>外はサクサク、中はエビ本来のしっかりした歯ごたえと深い味わい。</p>
    <h2>栄養成分</h2>
    <p>炭水化物50g、脂質15g、たんぱく質12g</p>
    <aside>
      <p>栄養成分の表示は、健康増進法に基づく数値を基本としております。</p>
    </aside>
  </body>
</html>
参考文献:W3C HTML5「4.4.5 The aside element」外部リンク
HOME