A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://developer.mozilla.org/zh-TW/docs/Web/HTML/Reference/Elements/section below:

<section>ï¼šé€šç”¨å€æ®µå…ƒç´ - HTML：超文本標記語言 | MDN

<section>：通用區段元素

Baseline Widely available

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

嘗試一下 
<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>
屬性

此元素僅包括全域屬性。

使用注意事項

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

還要考慮以下情況：

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

範例 簡單使用範例 之前 
<div>
  <h2>Heading</h2>
  <p>Bunch of awesome content</p>
</div>
結果 之後 
<section>
  <h2>Heading</h2>
  <p>Bunch of awesome content</p>
</section>
結果 在不使用標題型內容的情況下使用章節

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

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

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

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

<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 有好處，因此這是需要考慮的選擇。

技術摘要 規範 瀏覽器相容性 參見

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4