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

試してみましょう

<p>
  Salamanders are a group of amphibians with a lizard-like appearance, including
  short legs and a tail in both larval and adult forms.
</p>

<aside>
  <p>The Rough-skinned Newt defends itself with a deadly neurotoxin.</p>
</aside>

<p>
  Several species of salamander inhabit the temperate rainforest of the Pacific
  Northwest, including the Ensatina, the Northwestern Salamander and the
  Rough-skinned Newt. Most salamanders are nocturnal, and hunt for insects,
  worms and other small creatures.
</p>

aside {
  width: 40%;
  padding-left: 0.5rem;
  margin-left: 0.5rem;
  float: right;
  box-shadow: inset 5px 0 5px -5px #29627e;
  font-style: italic;
  color: #29627e;
}

aside > p {
  margin: 0.5rem;
}

属性

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

使用上の注意

  • 文章中の括弧書きについては、文章の主要な流れに属するものであるといえますので、これをタグ付けするために <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

ブラウザーの互換性

BCD tables only load in the browser

関連情報