<section>：通用章節元素

基線 廣泛可用

此功能已完善，可在許多裝置和瀏覽器版本中使用。它自以下時間起在所有瀏覽器中均可用： 2015 年 7 月.

<section> HTML 元素表示文件中一個通用的獨立章節，它沒有更具體的語義元素來表示它。除了極少數例外情況，章節應始終包含標題。

試一試

屬性

此元素僅包含全域性屬性。

使用說明

如上所述，<section> 是一個通用的分段元素，僅當沒有更具體的元素來表示它時才應使用。例如，導航選單應該用 <nav> 元素包裹，但搜尋結果列表或地圖顯示及其控制元件沒有特定的元素，可以放在 <section> 內。

另請考慮以下情況

  • 如果元素的內容表示一個獨立的、原子的內容單元，該內容單元作為獨立的部分進行聯合是有意義的（例如，部落格文章或部落格評論，或報紙文章），則 <article> 元素將是更好的選擇。
  • 如果內容表示與主要內容一起使用的有用的切向資訊，但不是其直接的一部分（如相關連結或作者簡介），則使用 <aside>。
  • 如果內容表示文件的主要內容區域，請使用 <main>。
  • 如果您只是將元素用作樣式包裝器，請改用 <div>。

重申一遍，每個 <section> 應被識別，通常透過包含標題（h1 - h6 元素）作為 <section> 元素的子元素，在可能的情況下。請參見下面的示例，瞭解在沒有標題的情況下可能看到 <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

在 Web 應用程式/UI 部分而不是傳統文件結構中通常會發現沒有標題使用 <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

規範

規範
HTML 標準
# the-section-element

瀏覽器相容性

BCD 表格僅在瀏覽器中載入

另請參閱