目次に戻る

aside要素：HTML Living Standard各要素別メモ

概要

カテゴリー
配置できる場所
内容モデル
属性
HTML構文におけるタグの省略
  • 省略不可。
WAI-ARIA
  • デフォルトroleは、complementary。デフォルトroleをrole属性値に指定することは、推奨されない。
  • デフォルトrole以外では、feed、note、region、search、presentation、noneを指定可。
視覚系ブラウザのデフォルトとして期待されるCSS

  aside {
    display: block;
    unicode-bidi: isolate;
  }
意味・用法

周囲のコンテンツと脱線気味に関連し、かつそのコンテンツから分離していると考えられるコンテンツで構成されるセクションを表す。

単なる挿入句はHTML文書のメインフローの一部であるので、単なる挿入句（括弧書きなど）にこの要素を用いることは適切でない。

私見・補足

前後のコンテンツに関連してるけれども本筋から外れている内容で分離しても本筋には影響がないものを表すセクションを指定する。

セクションの入れ子関係からすれば、直近の祖先Sectioning content（それがない場合は、body要素）のメイン部分に関連しているが本筋から外れている内容を表す。

例→補足記事、記事連動広告、注釈・出典・参考文献・索引（見出しを入れられるほどでないなら、これはfooter要素とすることもありうる）、ウェブサイト作成慣例上のサイドバー記載事項（ブログなら、著者プロフィール、人気記事ランキングなど）。

aside要素内をさらにセクション分けすることはありうる。当該ウェブページ内での位置づけでは、サイトナビゲーションもしょせんはおまけということであれば、aside要素の中にnav要素が入れ子になることもあるだろう。

Sectioning contentなので、実際に見出しを入れるかどうかはともかく、Heading contentで見出しを入れると不自然になるようなブロックには、そもそもふさわしくない。「単なる挿入句にこの要素を使用することは適切でない」というのも、そういう意味合いと思われる。

定義からある程度役割は明確だが、Heading contentで見出しをつけた方が親切。見出しの文言としては、「補足」、「補足記事」、「余談」、「おまけ」、「サイドバー」、「脚注」といったあたりだろうか。

定義が微妙で扱いが難しいところがある。特に、当該ウェブページに前後のコンテンツと全く関連してないもの（記事「無」連動広告とか）が紛れ込んでたら、どうやってマークアップすればいいのだろうか。

aside要素の用例

    <body>
      <h1>空要素について</h1>
        <p>空要素は、原則として開始タグのみを記載し、終了タグはあってはならない。</p>
        <p>ただし、開始タグをスラッシュ記号で閉じることはできる。この場合は、古いブラウザへの後方互換性の確保のために、スラッシュ記号の前には半角スペースを入れた方がよい。</p>
        <p>空要素には、br要素、img要素、input要素などがある。</p>
      <aside>
        <h2>余談</h2>
          <p>空要素でない要素については、その内容がたまたま空だからといって、終了タグを省略して開始タグをスラッシュ記号で閉じる記法を用いることはできない。</p>
      </aside>
    </body>