許多網站空有華麗外貌，底層代碼卻混亂不堪。在香港，許多網頁設計方案若過度依賴非語義化的標籤，會導致搜尋引擎難以解析內容核心，直接拖累 SEO 關鍵字排名。這種代碼結構的缺失，往往是中小企網站流量遲遲無法突破的隱形成因。
要提升網頁可訪問性 (Accessibility)，正確應用語義化標籤是不可或缺的基礎。本文將從基礎開發角度，拆解 <header>、<main> 及 <article> 等標籤的實際用途。透過優化底層代碼結構，我們能讓搜尋爬蟲更高效地讀取資訊，助你打造一個結構紮實、且對 Google 更加友好的高品質官方網站。
語義化HTML是什麼？基礎概念解析
語義化HTML（Semantic HTML）指的是使用帶有明確含義的標籤來描述網頁內容，而非單純用樣式標籤來排版。簡單講，就是讓標籤本身「說清楚」它裝的是什麼內容。
舉個例子：<div class="header"> 和 <header> 在視覺上可能呈現一樣的效果，但對瀏覽器、搜尋引擎爬蟲和輔助技術來說，<header> 提供了明確的語意信息——這是頁首區域。而 <div> 本身不帶任何語義，需要靠 class 命名才能猜測用途，且這猜測只對人有效，對機器無效。
HTML5 的出現正式確立了語義化標籤的地位。在 HTML4 時代，幾乎所有佈局都靠 <div> 和 <span> 堆砌。HTML5 引入了一批具備明確語義的元素，讓代碼的「意圖」能被機器正確解讀。這對 SEO 和可訪問性都有實質幫助，不是表面文章。
語義化HTML的核心定義：使用標籤本身的語義來描述內容結構，讓瀏覽器、搜尋引擎和輔助工具都能理解網頁各部分的角色與重要性。
語義化標籤的核心作用與好處
很多人問，用 <div> 不是一樣可以做到想要的版面嗎？技術上係，但你少咗幾個重要的好處：
- SEO 提升：搜尋引擎能更準確理解頁面內容的層次結構，知道哪些是主要內容、哪些是導航、哪些是補充資訊，有助於提升相關性排名。
- 可訪問性增強：屏幕閱讀器（如 NVDA、VoiceOver）依賴語義標籤來引導視障用戶瀏覽，語義化代碼能讓更多人正常使用你的網站。
- 代碼可讀性：日後維護或交接給其他開發者時，語義化代碼更容易理解，不需要逐行讀 class 名稱才知道結構。
- 未來相容性：符合 W3C 標準的語義化結構，對未來瀏覽器版本和新裝置的相容性更好。
根據 W3C 無障礙指引（WCAG），語義化 HTML 是網頁可訪問性合規的基本要求之一，對公共機構網站更是強制標準。這不只是最佳實踐，而是有實際規範依據的。
HTML5語義化標籤完整介紹
以下是 HTML5 常用語義標籤的功能說明，實際使用時需根據內容角色來選擇，而非依照視覺位置套用：
| 標籤 | 語義用途 | 常見位置 |
|---|---|---|
<header> | 頁首或章節標頭 | 全頁頂部、文章開頭 |
<nav> | 導航連結區域 | 主選單、麵包屑 |
<main> | 頁面主要內容 | 每頁只應出現一次 |
<article> | 獨立完整內容單元 | 文章、博客貼文、產品介紹 |
<section> | 主題性內容區塊 | 服務介紹、功能區塊 |
<aside> | 補充性側邊內容 | 相關文章、廣告欄 |
<footer> | 頁尾或章節底部 | 全頁底部、文章結尾 |
<figure> / <figcaption> | 圖片與說明文字 | 圖文內容區 |
<time> | 日期時間標記 | 發布日期、活動時間 |
<mark> | 高亮重點文字 | 搜尋結果標記 |
需要特別注意的是 <article> 和 <section> 的分別。<article> 是指可以獨立存在並仍有完整意義的內容，例如一篇博客文章抽出來放到其他地方也成立。<section> 則是頁面內的主題分區，通常與頁面脈絡有關，單獨存在未必完整。混用這兩個標籤是很常見的錯誤。
如何規劃語義化網頁結構
從內容角色出發，而非視覺佈局
規劃語義化網頁結構的第一步，是把頁面的內容角色理清楚，再對應到適合的標籤，而不是先看設計稿的視覺分區，然後套標籤。這個思維轉換非常重要。
一個標準的語義化頁面骨架大致如下：
<header>：網站標誌、主標題、主導航（<nav>）<main>：頁面核心內容，每頁只出現一次- 在
<main>內：用<article>或多個<section>組織內容 <aside>：側邊欄補充資訊（如有）<footer>：版權、聯絡資訊、次要連結
標題層級必須有序
語義化結構不只靠標籤，標題層級（H1–H6）的正確使用同樣關鍵。每個頁面應只有一個 <h1>，代表頁面主題，H2 是章節標題，H3 是小節標題，依此類推。跳級使用（例如 H1 直接跳到 H4）會破壞文件大綱，影響爬蟲理解內容層次。
做 網頁設計 時，這些結構規劃在開發初期就要做好，後期補救成本很高，特別是內容頁面多的網站。
語義化標籤的實戰應用範例
以一篇博客文章頁面為例，以下是正確的語義化HTML結構寫法：
- 用
<article>包裹整篇文章 - 文章標題用
<h1>，作者與發布日期放在<header>內，日期用<time datetime="2025-01-01">標記 - 文章各章節用
<section>分隔，每個<section>有對應的<h2> - 文章內的圖片用
<figure>包裹，說明文字用<figcaption> - 相關文章推薦放在
<aside>內 - 文章底部的作者資訊用
<footer>包裹
實際寫代碼時，要避免「什麼都用 section 包」的習慣。<section> 應有明確的主題，且通常配備一個標題標籤。如果某個區塊沒有標題，用 <div> 反而更合適。語義化不是強行用新標籤，而是用對的標籤。
語義化HTML如何提升SEO排名
語義化標籤對SEO的幫助是間接但實質的。Google 的爬蟲會分析頁面的 HTML 結構來理解內容層次與重要性。當你用 <article> 包裹主要內容、用 <nav> 標記導航，爬蟲能更快分辨哪部分是核心內容，哪部分是輔助資訊。
根據 Google Search Central 官方文件，結構清晰的 HTML 有助於 Googlebot 更有效地爬取和索引頁面內容。語義化代碼讓爬蟲「省力」，相當於你幫它做好了分類工作。
語義化影響SEO的幾個具體面向
- 內容權重分配：
<main>和<article>內的文字，比<aside>或<footer>的文字被賦予更高權重 - Rich Result 觸發機會：配合 Schema Markup 結構化數據，語義化的文章和產品標籤更容易觸發豐富搜尋結果（Rich Snippets）
- Core Web Vitals：語義化且整潔的 HTML 有助於減少渲染阻塞，間接改善頁面載入速度指標
- 移動端索引：Mobile-first 索引下，語義清晰的頁面結構更易被正確解讀
如果你的網站想從代碼層面認真做好 SEO，數碼營銷與SEO優化 不只是關鍵字的事，底層技術結構同樣是排名的基礎。
改善網頁可訪問性的語義化技巧
網頁可訪問性（Web Accessibility）在香港仍屬相對冷門的話題，但這不代表可以忽視。隨著無障礙法規在各地逐步收緊，加上 Google 已明確把可訪問性納入評估維度，做好這部分只有好處。
語義化 HTML 是可訪問性的基礎。屏幕閱讀器依賴標籤語義來建構「無障礙樹（Accessibility Tree）」，讓視障用戶知道頁面有哪些區域、如何導航。如果整個頁面都是 <div>，屏幕閱讀器根本無法提供有意義的導航提示。
- 為
<img>提供有描述性的alt屬性，空裝飾圖用alt="" - 表單的
<label>必須正確對應<input>的id - 互動元素（按鈕、連結）用
<button>和<a>，而非<div onclick> - 使用 ARIA 屬性補充語義（但語義化 HTML 本身正確時，應盡量避免過度使用 ARIA）
<nav>可搭配aria-label區分主導航與次要導航
避免常見的語義化標籤錯誤
見過唔少網站，開發者以為加了語義標籤就係做好，但錯誤用法有時比純用 <div> 更壞事，因為會傳遞錯誤信息給搜尋引擎。
最常見的五個錯誤
- 一頁多個
<main>：<main>代表頁面主要內容，每頁只能有一個，否則語義矛盾。 - 用
<section>代替<div>：<section>必須有主題且通常配標題，純粹為了樣式分區時用<div>更正確。 - 標題層級跳躍：從
<h1>直接跳到<h3>，破壞文件大綱邏輯。 - 把
<article>用作樣式容器：<article>應裝載獨立完整的內容，不是當 card 容器用的萬能盒子。 - 忽略
<figure>和<figcaption>：帶說明的圖片不用<figure>包裹，是放棄了一個明確的語義機會。
進階語義化與結構化數據整合
語義化 HTML 本身已能幫助搜尋引擎理解內容，但要進一步觸發 Rich Results（豐富搜尋結果），需要結合 Schema Markup 結構化數據。兩者是相輔相成的關係：語義化 HTML 提供結構，Schema Markup 提供機器可讀的精確數據。
以文章頁面為例，在 <article> 標籤上加入 itemscope itemtype="https://schema.org/Article"，再配合 itemprop 屬性標記標題、作者、發布日期等，Google 就能在搜尋結果中顯示更豐富的資訊，提升點擊率（CTR）。
常見可整合的 Schema 類型包括：
- Article / BlogPosting：文章、博客內容
- Product：電商產品頁，可顯示評分、價格
- FAQPage：FAQ 常見問題，直接在搜尋結果展開問答
- BreadcrumbList：麵包屑導航，改善搜尋結果的 URL 顯示
- LocalBusiness：本地商業資訊，對香港中小企特別有用
根據 Schema.org 官方規範，結構化數據與語義化 HTML 共同使用時，能讓搜尋引擎對內容的理解更全面、更精準。對於有 WordPress 網站 的用戶，可以透過 Yoast SEO 或 Rank Math 插件輔助生成結構化數據，但底層語義化 HTML 結構仍需手動確保正確。
語義化網頁設計的最佳實踐
把以上所有知識整合起來，以下是實際開發時可以執行的最佳實踐清單：
- 開發前先做內容規劃，釐清每個區塊的「角色」再選標籤
- 每頁保持唯一
<h1>，標題層級嚴格有序 - 主要內容一律放在
<main>內，頁首頁尾用<header>和<footer> - 圖片一律加有意義的
alt文字，裝飾圖用空alt - 導航連結用
<nav>，並用aria-label區分多個導航區 - 定期用 W3C Markup Validator 驗證 HTML 正確性
- 使用瀏覽器開發者工具的 Accessibility 面板檢查無障礙樹結構
- 重要內容頁面加入對應 Schema Markup
語義化網頁設計不是一次性的工作，而是貫穿整個開發流程的思維習慣。做得好的語義化結構，能讓一個網站在 SEO、可訪問性和代碼質量上同時得益，長遠來看回報是實在的。
如果你正在考慮重新梳理或建立一個底層結構紮實的網站，BrianLO Studio 的網頁設計服務從架構規劃到代碼實作都會認真對待，唔係淨係靚，係要幫你做生意。想了解我們的服務方案，可以先到即時報價頁面看看，或直接WhatsApp 我們傾傾你的需求，透明報價，唔合適唔勉強。
