試一試
<h1>Choosing an Apple</h1>
<section>
<h2>Introduction</h2>
<p>
This document provides a guide to help with the important task of choosing
the correct Apple.
</p>
</section>
<section>
<h2>Criteria</h2>
<p>
There are many different criteria to be considered when choosing an Apple —
size, color, firmness, sweetness, tartness...
</p>
</section>
h1,
h2 {
margin: 0;
}
屬性
此元素僅包含全域性屬性。
用法說明
如上所述，<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> 的情況通常出現在 Web 應用程式/UI 章節中，而不是傳統的文件結構中。在文件中，如果沒有標題來描述其內容，則有一個單獨的內容章節是沒有意義的。此類標題對所有讀者都很有用，但對螢幕閱讀器等輔助技術使用者尤其有用，它們也對 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 # section-element |
瀏覽器相容性
載入中…