HTML5 語意標籤怎麼用？看懂結構與 SEO 影響

HTML5 是什麼？為什麼現在還常被拿來討論

HTML5 是現代網頁常見的 HTML 版本稱呼，用來描述更簡潔、更語意化、更適合現代瀏覽器解析的網頁標記方式。到了 2026 年，更精準的說法是 HTML 持續演進，不只停在固定版本。

HTML 是網頁內容的骨架，負責標記標題、段落、連結、表單、導覽與主要內容。HTML5 讓文件宣告更簡潔，也加入更多能描述內容角色的標籤，這正是網站負責人與 SEO 執行者最該注意的部分。

重點摘要：HTML5 不是只代表影音或互動功能，對內容型網站來說，語意化 HTML 才是更接近 SEO 與網站品質的核心。

HTML5 和 HTML 有什麼不同

HTML 是網頁標記語言的總稱，HTML5 是其中一個重要版本。和較舊的 HTML 相比，HTML5 簡化了 <!DOCTYPE html>，也讓 header、nav、main、article、section 等語意標籤成為現代網頁結構的常見寫法。

HTML5 還是最新標準嗎

HTML5 仍是大眾搜尋與溝通時常用的說法，但現代 HTML 已走向持續更新的 HTML Living Standard。實務上可以用 HTML5 這個詞讓讀者理解主題，但寫作與建站時要知道標準本身仍在演進。

HTML5 語意標籤是什麼

HTML5 語意標籤是能表達內容角色的 HTML 標籤，例如頁首、導覽、主內容、文章、補充內容與頁尾。它們的價值在於讓瀏覽器、搜尋引擎、輔助工具與維護者更容易看懂網頁結構。

過去很多網站習慣用大量 <div> 包出所有區塊，再用 class 名稱補充用途。這能完成畫面，但 HTML 結構本身不夠清楚。語意標籤則直接把區塊角色寫進標記中。

寫法	結構意義	適合情境
<div class="nav">	無原生語意，靠 class 說明	純排版容器或樣式包裝
<nav>	代表導覽區塊	主選單、分類選單、文章目錄
<main>	代表頁面主要內容	一頁中最核心、不可重複的內容區

語意標籤和 <div> 的差別

<div> 是沒有語意的通用容器，適合排版、分組或掛 CSS。語意標籤則會告訴系統這個區塊的用途。我的判斷是：如果拿掉 CSS 後還能看出內容角色，這個 HTML 結構通常比較健康。

語意化 HTML 不等於畫面樣式

語意化 HTML 不負責讓畫面變漂亮。樣式應交給 CSS，互動行為交給 JavaScript，HTML 則負責內容與結構。把三者分清楚，網站後續維護、SEO 檢查與改版溝通都會省很多力氣。

HTML5 常見語意標籤有哪些

常見 HTML5 語意標籤包含 header、nav、main、section、article、aside、footer、figure、figcaption 與 time。每個標籤都應依內容角色使用。

標籤	用途	適合內容	常見錯誤
<header>	頁面或區塊的頁首	Logo、標題、簡介	誤以為只能放在全站最上方
<nav>	導覽連結區	主選單、分類、目錄	把所有連結都包進 nav
<main>	頁面主內容	文章正文、商品主資訊	同一頁放多個主要 main
<section>	有主題的內容區塊	章節、服務介紹、FAQ 分區	拿來取代所有 div
<article>	可獨立理解的內容	文章、新聞、評論、單篇貼文	把每張排版卡片都當文章
<aside>	補充或周邊內容	側欄、相關文章、補充說明	放進主文不可缺少的重點
<footer>	頁尾或區塊結尾	版權、作者、補充連結	只把全站頁尾才視為 footer
<figure>	獨立媒體或範例內容	圖表、程式碼範例、示意內容	沒有需要獨立說明也硬包
<figcaption>	figure 的說明文字	圖說、表格說明、範例註解	和 figure 拆開使用
<time>	標記日期或時間	發布日、更新日、活動時間	只用普通文字寫日期

頁面結構標籤：header、nav、main、footer

這些標籤負責頁面大結構。網站負責人驗收時，不必看懂所有程式碼，但至少可以要求主內容、導覽與頁尾在 HTML 中有清楚區分。

內容區塊標籤：section、article、aside

section 適合有明確主題的章節，article 適合可獨立閱讀的內容，aside 則用在補充資訊。這三個標籤最容易被誤用，判斷時要先看內容角色，再看畫面位置。

輔助語意標籤：figure、figcaption、time

輔助語意標籤通常不決定頁面主架構，但能讓細節更清楚。例如發布日期用 time 標記，圖表或範例用 figure 搭配 figcaption，有助於內容被正確理解。

section、article、div 到底怎麼選

section、article、div 的選擇關鍵是內容是否有明確角色。可獨立閱讀用 article，有主題章節用 section，只是排版包裝才用 div。

• 如果這塊內容可以單獨被分享、轉載或放進 RSS，就用 article。
• 如果這塊內容是頁面中的一個主題章節，通常有自己的標題，就用 section。
• 如果這塊內容只是為了排版、格線、背景或間距，就用 div。
• 如果你說不出這個區塊的內容角色，先不要急著套語意標籤。

有明確主題時用 section

section 適合放一組有共同主題的內容，例如「服務流程」、「常見問題」、「產品規格」。沒有標題的區塊通常不適合用 section，因為它的主題不明確。

可獨立被閱讀或轉載時用 article

article 適合文章、新聞、部落格單篇、評論或可獨立存在的卡片內容。如果一張卡片只是連到其他頁面的入口，不一定需要用 article。

只是排版容器時才用 div

div 沒有不好，錯的是把它用來承擔所有內容角色。實務上我會保留 div 給版面控制，讓語意標籤專心描述內容結構。

<article>
  <h2>HTML5 語意標籤教學</h2>
  <section>
    <h3>語意標籤用途</h3>
    <p>這裡是一個明確主題區塊。</p>
  </section>
  <div class="layout-spacer"></div>
</article>

HTML5 語意標籤為什麼對 SEO 有幫助

HTML5 語意標籤對 SEO 的幫助在於提升搜尋引擎理解頁面結構的機會，讓主內容、導覽、補充內容、段落主題與標題階層更清楚。它不是保證排名的開關，但屬於良好技術 SEO 基礎。

讓搜尋引擎更容易分辨主內容與輔助內容

main、article、aside 能幫助搜尋引擎判斷哪些內容是頁面核心，哪些是側欄、推薦閱讀或輔助資訊。對內容型網站來說，主內容辨識清楚比堆更多關鍵字更實在。

讓導覽、頁首、頁尾不干擾主題判斷

每個頁面都會重複出現選單、頁尾、版權與全站連結。用 nav、header、footer 標出這些區域，可以降低重複元素干擾主題判斷的機會。

讓段落與主題區塊更容易被抽取

搜尋結果有時會抽取頁面中的特定段落或答案。清楚的 section、標題與段落安排，能讓搜尋引擎更容易理解單一區塊在回答什麼問題。這也呼應內容策略中常談的主題分層，可延伸閱讀 內容策略。

搭配正確 H1-H3 階層才有完整效果

語意標籤不能取代標題階層。H1 到 H3 應反映內容層級，而不是只拿來調字體大小。若標題跳層、主題混亂，即使使用 HTML5 語意標籤，SEO 結構仍然不夠穩。

HTML5 語意標籤與可存取性：不只影響 SEO

HTML5 語意標籤也能提升可存取性，因為螢幕閱讀器與輔助工具會依照 HTML 結構辨識頁首、導覽、主內容與頁尾。清楚結構同時幫助搜尋引擎與使用者理解頁面。

語意標籤如何幫助螢幕閱讀器

螢幕閱讀器可以利用 landmark 快速跳到主內容、導覽或頁尾。這對鍵盤操作使用者很重要，也讓網站不只在視覺上可用，在結構上也可被理解。這一點常被忽略，但它是網站品質的基本功。

什麼時候還需要 ARIA

原生 HTML 語意足夠時，優先使用原生標籤。ARIA 適合補充複雜互動元件或原生語意不足的情境，不應拿來修補混亂的 HTML 結構。先寫好語意化 HTML，再考慮 ARIA，通常是比較穩的順序。

HTML5 基本文件骨架範例

HTML5 文件骨架應包含簡潔的 doctype、正確語言屬性、UTF-8 字元編碼、頁面標題與語意化主內容區。這些基礎不花時間，卻會影響瀏覽器解析、可存取性與後續 SEO 檢查。

最基本的 HTML5 文件結構

<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
  <meta charset="UTF-8">
  <title>HTML5 語意標籤範例</title>
</head>
<body>
  <main>
    <h1>HTML5 語意標籤</h1>
    <p>主要內容放在 main 裡。</p>
  </main>
</body>
</html>

語意化頁面骨架範例

<header>
  <nav>主要導覽</nav>
</header>
<main>
<article>
<h1>文章標題</h1>
<section>
<h2>章節標題</h2>
<p>章節內容。</p>
</section>
</article>
</main>
<footer>網站頁尾</footer>

這個骨架沒有處理 CSS、JavaScript 或結構化資料，因為重點是 HTML5 文件結構。若要延伸到網站設計系統，可參考 設計系統；若要檢查載入體驗，可再看 Core Web Vitals。

HTML5 移除了哪些舊標籤？避免學到過時寫法

HTML5 之後應避免使用以視覺呈現為主的舊標籤，例如 font、center、frame、frameset、applet。現代網頁應由 HTML 負責結構，CSS 負責樣式。

不建議再用的舊標籤

舊標籤	問題	現代替代方式
<font>	把字型樣式寫進 HTML，結構與樣式混在一起	使用 CSS 控制字型、大小、顏色
<center>	用 HTML 控制置中，不利維護	使用 CSS 的 text-align 或版面設定
<frame>	切割頁面結構，對可用性與搜尋理解不友善	使用現代版面、元件與正常連結架構
<frameset>	取代正常 body 結構，已不適合現代網站	以語意化 HTML 與 CSS 版面處理
<applet>	依賴過時外掛技術	改用現代瀏覽器原生能力或合適的 JavaScript 實作
<big>	只表達視覺大小，缺少結構意義	用 CSS 控制文字大小

現代替代方式：CSS 負責樣式，HTML 負責結構

如果一個標籤只是在控制顏色、大小、置中或版面，它多半不該由 HTML 承擔。陳建宏在審網站時會先看這件事：原始碼是否把內容結構寫清楚，而不是把視覺效果塞進 HTML。

常見錯誤：語意標籤不是越多越好

語意標籤用錯會讓網頁結構更混亂。常見問題包含一頁多個主要 main、沒有標題的 section、把所有卡片都包成 article，以及標題階層和內容結構不一致。

一頁不應有多個主要 main

main 應代表頁面主要內容，一頁通常只需要一個。若有多個內容區，應用 section、article 或 div 區分，不要把每個大區塊都寫成 main。

不要用 section 取代所有 div

section 應有明確主題，通常也應有標題。若只是為了排版、留白、格線或背景色，用 div 比較正確。語意標籤用得精準，比用得很多更重要。

標題階層要和內容結構一致

H1、H2、H3 應反映內容層級。不要因為字體大小就跳用 H4，也不要讓多個 H2 其實都在講同一件事。SEO 檢查時，標題階層和語意標籤要一起看，不能只看其中一項。

HTML5 語意標籤檢查清單

HTML5 語意標籤檢查可以從主內容、導覽、標題階層、文章區塊、補充內容、頁尾與原始碼可讀性開始。非工程背景的網站負責人也能用這份清單驗收基本 SEO 結構。

網站負責人可以檢查的項目

檢查項目	判斷方式	SEO 意義
頁面是否有清楚主內容	文章或主要資訊是否集中在同一區	幫助搜尋引擎判斷頁面重點
導覽是否清楚	主選單、分類、麵包屑是否容易辨識	幫助理解網站架構與內部連結
標題是否有層級	H1 到 H3 是否依內容展開	幫助主題與段落解析
頁尾是否收斂	版權、公司資訊、輔助連結是否放在頁尾	降低重複資訊干擾主內容
文章頁是否像文章	標題、作者、日期、正文是否完整	提升內容型頁面的可理解性

前端或 SEO 可以進一步檢查的項目

• 一頁是否只有一個主要 main。
• section 是否有明確主題與對應標題。
• article 是否真的可獨立閱讀。
• nav 是否只用於重要導覽連結。
• aside 是否放補充資訊，而非主文重點。
• 日期是否可用 time 標記。
• 是否仍出現 font、center 等過時 HTML 標籤。
• HTML、CSS、JavaScript 的分工是否清楚。
• 內容系統或 CMS 是否輸出乾淨結構，可延伸閱讀 CMS 是什麼。
• 外包網站時，是否把語意化結構列入驗收，可搭配 自架網站與外包網站比較 評估。

如果網站仍大量使用 div，不代表一定有 SEO 問題；但對品牌官網、內容網站與電商頁面來說，清楚的 HTML5 語意結構會讓搜尋引擎、使用者與維護者都更容易理解頁面。這就是語意標籤真正的價值。

HTML5 是什麼？

HTML5 是 HTML 的重要版本名稱，也是現代網頁常見的基礎說法。它讓網頁能用更清楚的結構標記內容，並支援多媒體、表單與其他現代網頁能力。不過 2026 年更精準的說法是 HTML 已持續演進，不只停在某個固定版本。

HTML5 和 HTML 有什麼不同？

HTML 是網頁標記語言的總稱，HTML5 是其中一個重要版本。和舊版相比，HTML5 加入更多語意標籤，也簡化了文件宣告，例如 <!DOCTYPE html>。

HTML5 語意標籤有哪些？

常見語意標籤包含 header、nav、main、section、article、aside、footer、figure、figcaption、time。它們的功能是描述內容區塊的角色，而不是控制畫面樣式。

HTML5 語意標籤真的會幫助 SEO 嗎？

會有幫助，但不是保證排名的直接開關。語意標籤可以讓搜尋引擎更容易理解主內容、導覽、補充內容和頁面結構，進而降低頁面解析成本。

section 和 article 差在哪裡？

section 適合用在頁面中的主題區塊，通常會有自己的標題；article 適合可獨立閱讀或被轉載的內容，例如文章、新聞、評論或單篇卡片內容。

還可以用很多 <div> 嗎？

可以。div 沒有語意，適合純排版或包裝用途。若區塊本身有明確角色，就應優先考慮語意標籤；如果只是為了 CSS 排版，用 div 反而比較合理。

HTML5 還是最新標準嗎？

HTML5 仍是大眾常用說法，但正式規格已走向持續更新的 HTML Living Standard。寫文章時可以使用「HTML5」滿足搜尋語言，但內文應補充現代 HTML 持續演進的背景。

HTML5 一定要搭配 CSS 和 JavaScript 嗎？

HTML 負責內容與結構，CSS 負責視覺樣式，JavaScript 負責互動行為。語意化 HTML 的核心是先把內容結構寫清楚，再交給 CSS 和 JavaScript 處理外觀與互動。

HTML5 有哪些舊標籤不建議再用？

像 font、center、frame、frameset、applet 等舊寫法都不建議再用。現代網頁應用 CSS 處理樣式，用語意標籤處理內容結構。

網頁公司有使用 HTML5 就代表 SEO 一定好嗎？

不一定。HTML5 只是基礎，還要看標題階層、內容品質、內部連結、載入速度、行動版體驗、結構化資料與整體網站架構。