<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.

HTML <aside> 元素表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者标注框（call-out boxes）。

尝试一下

<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> 不能是<address> 元素的后代
允许的 ARIA 角色 feed, note, presentation, region, search
DOM 接口 HTMLElement

属性

此元素只有全局属性。

使用说明

  • 不要使用 <aside> 元素去尾随括号内的文本，因为这种文本被认为是主要流内容的一部分。

示例

html
<article>
  <p>
    迪斯尼电影<cite>海的女儿</cite>（<cite>The Little Mermaid</cite>）于 1989
    年首次登上银幕。
  </p>
  <aside>在首次发行期间，该片便收获了 8700 万美元的票房。</aside>
  <p>更多有关该电影的信息…</p>
</article>

规范

Specification
HTML
# the-aside-element

浏览器兼容性

参见