想像一下，打開一份 HTML 文件，卻發現裡面滿是<div>和<span>，每一個區塊看起來都一樣，沒有明確的意義標示。對開發者而言，這樣的程式碼結構就像一篇沒有章節劃分的文章，閱讀起來困難，也不利於維護。更糟的是，對搜尋引擎和輔助技術（如螢幕閱讀器）而言，這樣的內容毫無上下文可言。語意化標籤的出現正是為了解決這個問題。它們為 HTML 元素賦予了明確的意義，就像為房子裡的每個房間命名——客廳、廚房、臥室——讓人一目了然各區域的用途。

HTML5 引入了一系列語意化標籤，如<header>、<article>、<section>等，旨在讓開發者撰寫出結構更清晰、語義更豐富的 HTML。使用這些語意標籤，可以提升程式碼的可讀性和維護性，並對SEO（搜尋引擎最佳化）與無障礙性產生正面影響。我們將在本文深入介紹常見的 HTML 語意化標籤，以及它們如何與傳統的非語意化標籤（如<div>、<span>）形成對比。

<header>元素代表內容的介紹部分或一組導覽連結的集合。換言之，它通常出現在頁面的最上方，包含網站或章節的標題、導覽列、Logo、搜尋框或作者名稱等。你可以將<header>視為某個頁面或段落的開場白。值得注意的是，一個 HTML 文件中可以有多個<header>——例如網站有整體的頁首區域，每篇文章也可以各自擁有一個<header>作為文章的開頭。不過，<header>不應該嵌套在另一個<header>、<footer>或<address>元素內。

以下是一個簡單的<header>範例，包含網站標題和導覽列：

<nav>元素用於定義一組導航鏈結區域，例如網站的主選單、文章章節目錄或頁尾連結清單。使用<nav>可以讓瀏覽器和輔助技術辨識這部分內容是導航。通常我們會在<nav>內使用<ul>清單搭配數個<li>項目，將多個鏈結組織起來。

一個<nav>的典型用例如下：

<main>元素表示文件中主要的內容區域。頁面中主要且獨特的資訊應該放置在<main>中，這部分內容直接相關於頁面的主題，是使用者打開頁面後最關心的資訊。通常，網站模板會將<main>置於<header>之後、<footer>之前，並保證每個頁面僅使用一個<main>（一個頁面理論上不應該有多個主要內容區）。

下面是<main>的一個範例，裡面包含兩個章節<section>：

<section>元素定義了文件中的某個主題分區。可以將<section>想像為內容中的一個章節或段落群組，它通常會包含一個標題（使用<h2>等標題元素）來描述該區塊的主題。<section>適合用在將頁面內容依主題或功能劃分的情況，例如網站首頁可以分成「關於我們」、「最新消息」、「聯絡資訊」等區塊，每一個區塊都可以用<section>標示。

以下是一個<section>的範例：

<article>元素表示獨立且自成一體的內容（文章、帖子等）。當某段內容即使脫離整個網站或應用程式，也能獨立存在且有意義時，就適合使用<article>來標示。典型的例子包括：部落格文章、新聞稿、論壇帖子、使用者評論、產品介紹卡片等等。每個<article>通常會有自己的標題（<h1> - <h6>）作為內容的標識。

下面是一個簡單的<article>範例：

這個<article>片段代表了一篇獨立的文章，主題是「打造屬於你的第一個網站」。即使將這段<article>內容抽離出當前網頁，單獨拿出來，它仍然可以獨立存在並表達完整意義（例如作為RSS訂閱來源或被其他網站引用）。透過<article>標籤，我們明確告訴瀏覽器和開發者：這是一塊完整的內容單元，而非雜亂無章的<div>堆疊。

值得一提的是，<article>與<section>有時會混用或嵌套使用。根據情況，你可能會在一個<section>內包含多個<article>（例如新聞列表頁面，每則新聞作為一個<article>），也可能在一個<article>內劃分出數個<section>（例如長篇文章內的不同章節）。關鍵在於判斷內容的獨立性：如果內容是獨立可分發的，用<article>；如果內容只是文件的一部分主題，用<section>更恰當。

<aside>元素表示和主內容間接相關的區塊，通常作為側邊欄或附注出現。<aside>中的內容可以是對主題的補充說明、相關連結列表、廣告橫幅、引用、作者簡介等。重點是，這些內容不是文章敘述的主要流程，但對了解或導航整個頁面有幫助。

請看下面的<aside>範例，它作為內文的旁註：

<footer>元素代表最近一層章節內容的頁尾部分。常見的頁尾內容包括：版權資訊、作者署名、相關連結、網站聲明等。就像<header>是一個片段的開頭，<footer>就是它的收尾。<footer>既可以用在整個網頁的底部（網站全域頁腳），也可以用在一篇文章或一個<section>的結尾部分，用來提供該區域的附加資訊。

以下是一個頁面底部<footer>的範例：

既然了解了上述這些語意化標籤，那麼它們與傳統的<div>、<span>等非語意化標籤相比，有何不同呢？以下我們將透過一段對比範例程式碼，以及幾個重點來說明語意化與非語意化的差異。

首先，想像我們要構建一個簡單的網頁結構，包括頁首、主內容區（含一篇文章和一個側邊欄）以及頁尾。如果不使用語意化標籤，可能寫出這樣的程式碼：

從上述對比可以看出，使用語意化標籤的結構一目瞭然：看到<header>就知道是頁首，<main>裡面裝著主要內容，<article>是文章正文，<aside>是旁支資訊，<footer>是頁尾。在不看樣式的前提下，開發者或任何閱讀程式碼的人都能迅速理解頁面的佈局。而使用純<div>的版本則需要依賴id或class名稱來猜測用途，增加了理解成本。

關鍵差異重點：

SEO（搜尋引擎最佳化）： 搜尋引擎會根據語意結構更好地理解網頁內容。例如，Google 的爬蟲能辨識<nav>區塊屬於導航、<article>區塊是主要內容，從而在索引時更精準地提取資訊。儘管語意化標籤本身不會直接讓你的排名飆升，但井然有序的結構有助於搜尋引擎判斷內容的重要性與關聯性，長遠來看有利於 SEO。

可讀性： 對開發者而言，語意化標籤如同自帶註解。閱讀 HTML 程式碼時，<header>、<footer>等標籤名直觀地描述了區塊的角色，遠比一長串<div>更容易掃描和理解。這讓團隊協作、更改設計或除錯時更高效，也降低了引入錯誤的可能。

維護性： 當專案日漸龐大，清晰的結構就成了維護的基石。使用語意化標籤能鼓勵開發者以結構化的方式思考頁面，區分出各部分的職責。未來若要調整頁面版面或樣式，開發者可以很快地鎖定相關的結構區塊進行修改。此外，語意化標籤通常搭配全域的瀏覽器樣式（例如<article>和<section>默認為區塊元素），在需要統一調整時也更方便。

無障礙性： 對於使用螢幕閱讀器等輔助技術的用戶，語意化標籤提供了無形的輔助。許多語意元素天生具有 ARIA 角色（例如<nav>會被視為「導航區域」、<main>視為「主要內容」、<footer>視為「內容資訊」等），這讓輔助工具可以快速地跳轉到頁面各個區域，或提供頁面結構概要，提升了無障礙瀏覽體驗。相比之下，若全部使用<div>，則需要開發者手動添加 ARIA 屬性，否則輔助技術無從得知那些<div>的意義。