HTML 側邊欄 aside：間接相關的補充內容

Q: aside 一定要放在版面的側邊嗎？

不用。它指的是內容之間的關係而不是版面位置，文章中間插入的補充說明或小知識同樣可以用 aside。

Q: 怎麼判斷該用 aside 還是 section？

試著把它拿掉。主要內容照樣完整，就是 aside；拿掉之後內容出現缺口，那它其實是主體的一部分，該用 section。

用於定義側邊欄的區塊，內容跟主要內容沒直接的關係，通常會放入選單、廣告或與主題比較無關的內容。它其實不限定要放在版面的側邊，內文中的註解、延伸資訊同樣適用；判斷的標準是拿掉它之後，主要內容依然完整。

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> 被稱為側邊欄，就只能用在側邊的欄位，它也可以使用在內文中，主要是以間接關係來呈現!

判斷的標準

試著把這一塊拿掉：

主要內容照樣完整 → 用 <aside>。
內容出現缺口、讀不下去 → 它其實是主體的一部分，該用 <section>。

常見的用法

html

<main>
  <article>
    <h1>Vue 3 computed 計算屬性</h1>
    <p>...</p>
  </article>

  <aside aria-label="延伸閱讀">
    <h2>延伸閱讀</h2>
    <ul>
      <li><a href="/vue/essentials-watchers">監聽器 watch</a></li>
      <li><a href="/vue/essentials-reactivity">響應式基礎</a></li>
    </ul>
  </aside>
</main>