HTML 區塊容器 div：用途、時機與語意化取捨

Q: div 和 span 有什麼不同？

兩者都沒有語意，差在顯示層級。div 是區塊層級，會自己佔一整行；span 是行內層級，只包住文字本身，適合標記段落中的某幾個字。

Q: 包太多層 div 有什麼壞處？

文件結構會變得又深又難讀，機器也讀不出任何語意。這種滿頁都是 div 的寫法俗稱 divitis，維護時光要找出某一層對應畫面的哪一塊就很費力。

無任何語意，用來歸類區域的資訊，亦可包覆其他元素使用，方便套用 CSS 或以 JavaScript 操作。它是區塊層級元素，會自己佔一整行；動手前先想想有沒有 <header>、<main>、<section> 這類更合適的元素。

html

<div>
  <h2>UI/UX Team Lead</h2>
  <p>3 年以上 APP/Web 產品設計經驗。</p>
  <p>熟悉 Figma 應用，請提供設計過程和成果的作品集，讓我們更好地了解您的能力。</p>
  <p>具有設計面向消費者的 2C 產品/服務的經驗，擅長創造簡單且愉悅的用戶體驗。</p>
  <p>具備良好的溝通和表達能力，能清楚表達想法、設計決策並提供建設性回饋。</p>
</div>

<div>
  <h2>UI/UX Designer</h2>
  <p>1 年以上 APP/Web 產品設計經驗。</p>
  <p>熟悉 Figma 應用，請提供設計過程和成果的作品集，讓我們更好地了解您的能力。</p>
  <p>曾參與設計面向消費者的 2C 產品/服務的經驗，擅長創造簡單且愉悅的用戶體驗。</p>
  <p>具備良好的溝通和表達能力，能清楚表達想法、互動交流並提供建設性回饋。</p>
</div>

它是區塊層級元素

<div> 預設會自己佔滿一整行，前後自動換行；相對地，行內容器 <span> 只包住文字本身，不會換行。

html

<div>我獨佔一行</div>
<div>我也獨佔一行</div>

<span>我們</span><span>會排在同一行</span>

適合使用的時機

為了套用 CSS 版面（flex、grid）而需要一層容器。
為了讓 JavaScript 好操作而需要一個選取目標。
這一區在文件中確實沒有明確的語意角色。

先想想有沒有更合適的元素

上面的職缺範例，每一則其實都是可以獨立存在的內容，改用 <article> 更精準：

html

<!-- ❌ 什麼都用 div -->
<div class="header">
  <div class="nav">...</div>
</div>
<div class="main">
  <div class="job">...</div>
</div>
<div class="footer">...</div>

<!-- ✅ 有語意就用語意化元素 -->
<header>
  <nav>...</nav>
</header>
<main>
  <article>...</article>
</main>
<footer>...</footer>