HTML 章節 section：有主題的內容區塊

Q: section 和 div 該怎麼選？

試著替這一區下一個標題。下得出來，代表它有主題，用 section；下不出來，代表它只是為了排版而存在，用 div。

Q: section 和 article 差在哪？

article 的內容單獨拿出去也說得通，例如：一篇文章、一則留言；section 則對外層有依賴，它是整份內容裡的一個章節，抽出來就失去脈絡。

Q: section 一定要有標題嗎？

規格建議要有。沒有標題的 section 在文件大綱中會是一段沒有名字的區塊，此時通常代表你要的其實是 div。

主要用於定義章節的區塊，有主題性、明確意義，對外層有一定的相依性。一般來說，<section> 區塊中也會有自己的標題；想不出標題的區塊多半改用 <div> 更恰當，能單獨拿出去用的則該改用 <article>。

html

<h1>前端網頁開發三劍客</h1>

<section>
  <h2>HTML</h2>
  <p>用來描述網頁的內容和語意結構。</p>
</section>

<section>
  <h2>CSS</h2>
  <p>用來描述網頁的樣式和畫面如何被呈現。</p>
</section>

<section>
  <h2>JavaScript</h2>
  <p>用來描述網頁的行為，讓網頁可以跟使用者互動。</p>
</section>

小提醒

當該區塊內容是有主題性、明確意義（例如：聯絡資訊、目錄）時，則可以使用 <section>，沒有的話使用 <div> 就可以了。

一個簡單的判斷方式

試著替這一區下一個標題：

下得出來 → 它有主題，用 <section>。
下不出來，只是為了排版才包一層 → 用 <div>。
單獨拿出去也說得通 → 用 <article>。

html

<!-- ✅ 有主題，也有自己的標題 -->
<section>
  <h2>聯絡我們</h2>
  <p>...</p>
</section>

<!-- ❌ 只是為了套 flex 版面 -->
<section class="flex-row">
  <img src="./a.png" alt="">
  <img src="./b.png" alt="">
</section>