<section> 是進入 HTML5 之後才加入的章節區塊元素，通常會放入標題與一些內容，這篇文章將會介紹 <section> 文章區塊元素的用法。

原文參考：章節區塊 section

認識 <section>

<section> 是 HTML 裡作為定義章節的元素，文章區塊裡面可以放入標題、文字、圖片...等內容，如果網頁屬於文字型網頁，當中包含多個「段落」或「章節」，則推薦使用 <section> 分段，如果只有一段文章，則推薦使用 <article>，此外如果是要進行文章以外的排版，則建議使用 <div> 進行處理。

• <section> 屬於「容器元素」，需要有「起始標籤」以及「結束標籤」，也因為是容器元素，裡頭可以放入其他的子元素。
• <section> 顯示類型為「block 塊級元素」，預設會強制換行。

例如下方的 HTML 開啟後，在網頁中會放入三個 <section>，當中包含 <h2> 標題與 <p> 段落。

<section>
  <h2>唐詩 1</h2>
  <p>
    床前明月光，疑是地上霜，舉頭望明月，低頭思故鄉。
  </p>
</section>
<section>
  <h2>唐詩 2</h2>
  <p>
    春眠不覺曉，處處聞啼鳥，夜來風雨聲，花落知多少。
  </p>
</section>
<section>
  <h2>唐詩 3</h2>
  <p>
    千山鳥飛絕，萬徑人蹤滅，孤舟蓑笠翁，獨釣寒江雪。
  </p>
</section>

<section> 支援屬性

<section> 支援「全域屬性」以及「可見元素的事件屬性」( 參考「HTML 元素屬性」)，例如下方的 HTML，會將 <section> 加入 style 屬性改變顏色。

<section style="background:#fdd;">
  <h2>唐詩 1</h2>
  <p>
    床前明月光，疑是地上霜，舉頭望明月，低頭思故鄉。
  </p>
</section>
<section style="background:#dfd;">
  <h2>唐詩 2</h2>
  <p>
    春眠不覺曉，處處聞啼鳥，夜來風雨聲，花落知多少。
  </p>
</section>
<section style="background:#ddf;">
  <h2>唐詩 3</h2>
  <p>
    千山鳥飛絕，萬徑人蹤滅，孤舟蓑笠翁，獨釣寒江雪。
  </p>
</section>

<section> 預設樣式

下方列出 <section> 的預設樣式：

section {
  display: block;
}

更多教學

大家好，我是 OXXO，是個即將邁入中年的斜槓青年，我有個超過一千篇教學的 STEAM 教育學習網，有興趣可以參考下方連結呦～ ^_^

• Python 教學 ( 學習導讀 )
• Scratch 教學
• GA4 ( Google Analytics 4 ) 教學
• 生成式 AI ( AIGC ) 教學
• Midjourney 教學
• HTML 教學