<section>：通用區段元素

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.

<section> HTML 元素代表文件中的通用獨立區段，它沒有更具體的語義元素來代表它。區段應始終具有標題，幾乎沒有例外。

嘗試一下

屬性

此元素僅包括全域屬性。

使用注意事項

如上所述，<section> 是一個通用的區段元素，只有在沒有更具體的元素來代表它時才應使用。例如，導航菜單應該包裝在 <nav> 元素中，但搜索結果列表或地圖顯示及其控制元素沒有特定的元素，可以放在 <section> 中。

還要考慮以下情況：

  • 如果元素的內容代表作為獨立的、原子的內容單元，它作為獨立的部分進行合成是有意義的（例如，博客文章或評論，或者報紙文章），則 <article> 元素可能是更好的選擇。
  • 如果內容表示與主內容直接無關但又與其一起工作的有用的次要信息（如相關鏈接或作者簡介），請使用 <aside>。
  • 如果內容表示文件的主內容區域，請使用 <main>。
  • 如果你只將元素用作樣式包裝器，請改用 <div>。

重申一下，每個 <section> 都應該是可識別的，通常通過在 <section> 元素的子元素中包含標題（h1 - h6 元素）來實現。下面有一些可能看到沒有標題的 <section> 的示例。

範例

簡單使用範例

之前

html
<div>
  <h2>Heading</h2>
  <p>Bunch of awesome content</p>
</div>
結果

之後

html
<section>
  <h2>Heading</h2>
  <p>Bunch of awesome content</p>
</section>
結果

在不使用標題型內容的情況下使用章節

在網絡應用程序/用戶界面部分，可能會看到 <section> 在傳統文件結構中，將一個獨立的內容區段沒有標題並不是真的有意義。這樣的標題對所有讀者都有用，但對輔助技術（如屏幕閱讀器）的用戶特別有用，而且對於 SEO 也很有用。

然而，考慮一下次要的導航機制。如果全局導航已經包裝在 <nav> 元素中，你可能可以將上一篇/下一篇菜單包裝在 <section> 中：

html
<section>
  <a href="#">Previous article</a>
  <a href="#">Next article</a>
</section>

或者你的應用程序的某種按鈕欄來控制應用程序？這可能不一定需要標題，但它仍然是文件的一個獨立區段：

html
<section>
  <button class="reply">Reply</button>
  <button class="reply-all">Reply to all</button>
  <button class="fwd">Forward</button>
  <button class="del">Delete</button>
</section>

結果

根據內容的不同，包含標題也可能對 SEO 有好處，因此這是需要考慮的選擇。

技術摘要

內容類別 流內容、章節型內容、捫及內容。
允許的內容 流內容。
標籤省略 不允許，開始標籤和結束標籤都是必需的。
允許的父元素 任何接受流內容的元素。請注意，<section> 元素不得是 <address> 元素的後代。
隱含的 ARIA 角色 如果元素有可訪問的名稱，則是region，否則是generic
允許的 ARIA 角色 alert、alertdialog、application、banner、complementary、contentinfo、dialog、document、feed、log、main、marquee、navigation、none、note、presentation、search、status、tabpanel
DOM 介面 HTMLElement

規範

Specification
HTML Standard
# the-section-element

瀏覽器相容性

BCD tables only load in the browser

參見