最終更新日 2021年4月7日

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」

当サイトの活動をサポートしてみませんか？気軽にクリエイターの支援ができます。