HTML 語意化與 Heading 結構

你知道嗎？Google 看你的網頁不是像人一樣用「眼睛」看，而是讀 HTML 標籤。如果你的商品頁標題用 <div style="font-size:24px"> 而不是 <h1>，Google 根本不知道那是標題。<h1> 不只是「字比較大」——它告訴搜尋引擎「這是這一頁最重要的主題」。

Heading 階層：h1 到 h6

HTML 的標題標籤從 <h1>（最重要）到 <h6>（最不重要），就像一本書的章節結構：

Heading 使用原則：

• 每頁只有 一個 <h1>，通常是商品名稱或頁面主題
• 不要跳級（h1 下面直接放 h3，跳過 h2）
• 不要因為「想要字大一點」就用 h1 — 字體大小交給 CSS

電商商品頁的 Heading 結構範例

h1: AirMax Pro 無線藍牙耳機          ← 商品名稱
├── h2: 商品特色                      ← 大段落
│   ├── h3: 主動降噪技術
│   ├── h3: 30 小時超長續航
│   └── h3: IPX5 防水等級
├── h2: 商品規格
├── h2: 顧客評價
│   ├── h3: 最新評價
│   └── h3: 評分統計
└── h2: 常見問題

語意化標籤：讓 HTML 自己說話

除了 Heading，HTML5 提供了一系列「語意化標籤」，讓程式碼本身就能表達「這塊內容是什麼」：

好的結構 vs 壞的結構

壞的結構（div 湯）： Google 看不出哪裡是什麼

好的結構（語意化 HTML）： Google 清楚知道每塊內容的角色

AI 協作：學了這個，跟 AI 怎麼配合？

AI 很擅長快速生成 HTML 結構，但有時候會亂用 heading 或全用 div。你學會語意化後，就能一眼看出問題在哪。

你的人類優勢：

• 你知道頁面上哪個內容最重要（該用 h1）
• 你能規劃合理的內容層級（h1 → h2 → h3）
• 你能判斷 AI 生成的結構是否語意正確

可以這樣跟 AI 說：

幫我重構這段商品頁 HTML，用語意化標籤（header、nav、main、section、footer）重新組織結構。h1 放商品名稱，h2 放「商品特色」和「商品規格」兩個區塊標題。

練習題