為什麼不能只用 div：Semantic HTML 的四個硬理由

先把問題說清楚

你可能在 code review 遇過這種對話：

「這個 <div class="nav-wrapper"> 幹嘛改成 <nav>？功能一樣啊。」

從瀏覽器渲染的角度來看沒錯，視覺上完全一樣。但「功能一樣」這個前提，只有在你假設所有使用者都用視力、都用滑鼠、都不需要 SEO、都不在意 CSS 維護成本的情況下才成立。

拿掉這四個假設，div-only 的代價就出來了。

VoiceOver（macOS / iOS 內建）和 NVDA（Windows 最常用的免費螢幕閱讀器）讓視障使用者用鍵盤在頁面的 landmark 之間跳轉：直接從頁首跳到主內容、跳過重複的導覽列、直接定位到搜尋框。

這個跳轉靠的是 <nav>、<main>、<aside>、<header>、<footer> 這些 landmark 標籤。如果你用的是 <div class="nav">——螢幕閱讀器看不到它，使用者只能從頁面頂端一個元素一個元素往下聽。

導覽列 20 個連結，每次進來要聽完這 20 個才能到主內容。這是 div-soup 帶來的真實使用者體驗，不是假設。

WCAG 2.1 Level AA 在多個地區已是法規要求，不是「最佳實踐建議」：

美國 ADA（Americans with Disabilities Act）——聯邦法院已有多起網站無障礙訴訟，Robles v. Domino’s Pizza 在第九巡迴上訴法院勝訴，明確要求商業網站符合無障礙標準
歐盟 EN 301 549——European Accessibility Act 自 2025 年 6 月 28 日起全面適用於私人企業
台灣——《身心障礙者權益保障法》要求政府網站強制符合 WCAG 2.0，民間企業若有 ADA-style 訴訟風險也適用相同標準

WCAG SC 1.3.1 要求「內容結構必須可以用程式判讀」——意思是爬蟲和輔助技術都要能理解你的頁面結構。全部用 <div> 無法滿足這條規定。

「反正來我網站的人不會用螢幕閱讀器」不是法律免責聲明。台灣衛福部登記的視覺功能障礙者超過 5.5 萬，WHO 估計全球約 22 億人有不同程度的視力障礙。

Google Search Central 文件說明，crawler 使用 <nav>、<main>、<article> 理解頁面主要內容的邊界。

<main> + <article> 明確告訴 Google：這塊是內容，那塊是側欄，那塊是頁尾。這不是奇技淫巧，是給爬蟲讀 map 的基本動作。

Core Web Vitals 的 Largest Contentful Paint 也跟語意結構有關——有正確 landmark 的頁面，瀏覽器的 preload scanner 更容易預判主要內容位置，loading 路徑更短。

這是最沒人在意、但每個 sprint 都在付的成本。

div-soup 的 CSS 選擇器：

.container > .wrapper > .inner-wrapper > .content-area > .article-body p {
  line-height: 1.6;
}

semantic HTML 的 CSS 選擇器：

article p {
  line-height: 1.6;
}

三個月後你要找「導覽列的樣式在哪」：

Specificity 戰爭也會簡單很多。article > p 的特異度是 0-0-2，你不需要為了覆蓋它而堆 !important。

<div> 只有視覺，<nav> / <main> / <article> 有語意。語意讓螢幕閱讀器能導覽、讓法規能查驗、讓爬蟲能理解、讓工程師能維護。

「div 能跑就好」的代價，是你看不到的使用者在付，是你下一個維護週期在付，也是你以後面對法律追究時在付。

語意標籤的標準用法——哪個情境用哪個、<article> vs <section> vs <div> 的判斷樹，見 HTML 語意化標籤：結構六大標籤與判斷方法。