<aside>: The Aside element

Baseline 已廣泛支援

此特性已相當成熟,可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來,各瀏覽器均已提供此特性。

<aside> HTML 元素表示文件中與文件主要內容間接相關的一部分。<aside> 元素通常呈現為側邊欄或撥出框。

試一試

<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

規範

規範
HTML
# the-aside-element

瀏覽器相容性

另見