<aside>: 余談要素

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

<aside>HTML の要素で、文書のメインコンテンツと間接的な関係しか持っていない文書の部分を表現します。サイドバーやコールアウトボックスなどを表現するためによく使われます。

試してみましょう

属性

この要素にはグローバル属性のみがあります。

使用上の注意

  • 文章中の括弧書きについては、文章の主要な流れに属するものであるといえますので、これをタグ付けするために <aside> 要素を使用しないでください。

<aside> の使用

この例は <aside> を使用して記事の中のある段落をマークアップします。この段落は記事の主要な内容と間接的な関係しかありません。

html
<article>
  <p>
    The Disney movie <cite>The Little Mermaid</cite> was first released to
    theatres in 1989.
  </p>
  <aside>
    <p>The movie earned $87 million during its initial release.</p>
  </aside>
  <p>More info about the movie…</p>
</article>

結果

技術的概要

コンテンツカテゴリー フローコンテンツ区分コンテンツ知覚可能コンテンツ
許可されている内容 フローコンテンツ
タグの省略 なし。開始タグと終了タグの両方が必須です。
許可されている親要素 フローコンテンツを受け入れるすべての要素。<aside> 要素は <address> 要素の子孫要素として配置してはならない。
暗黙の ARIA ロール complementary
許可されている ARIA ロール feed, none, note, presentation, region, search
DOM インターフェイス HTMLElement

仕様書

Specification
HTML
# the-aside-element

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
aside

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報