<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>蝾螈是两栖动物的一种，其外形类似蜥蜴，包括幼体和成体的短腿和尾巴。</p>

<aside>
  <p>粗皮蝾螈用一种致命的神经毒素来保护自己。</p>
</aside>

<p>
  有几种蝾螈栖息在太平洋西北部的温带雨林中，其中包括恩萨蒂娜蝾螈、西北蝾螈和粗皮蝾螈。大多数蝾螈都是夜间活动，捕食昆虫、蠕虫和其他小生物。
</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>迪士尼电影<cite>《小美人鱼》</cite>于 1989 年首次在院线上映。</p>
  <aside>
    <p>电影在上映初期就获得了 8700 万美元的票房收入。</p>
  </aside>
  <p>关于电影的更多信息……</p>
</article>

结果

技术概要

内容分类 流式内容、分段内容、可感知内容。
允许的内容 流式内容。
标签省略 不允许，开始标签和结束标签都不能省略。
允许的父元素 任何接受流式内容的元素。请注意，<aside> 元素不能是 <address> 元素的后代。
隐含的 ARIA 角色 complementary
允许的 ARIA 角色 feed、none、note、presentation、region、search
DOM 接口 HTMLElement

规范

Specification
HTML
# the-aside-element

浏览器兼容性

参见