HTML5 是今天所有網頁都在用的 HTML 標準，它在 2014 年取代了用了十多年的 HTML 4.01，帶來語意化標籤、原生影音、Canvas 繪圖、新表單類型與一整組瀏覽器 API，也終結了 Flash。這篇文章專講「HTML5 新增了什麼、和舊版差在哪、對 SEO 有什麼影響」，並提供一份判斷舊網站是否還停在 HTML 4 時代的檢查清單。HTML 本身的語法、標籤與入門教學，由〈HTML 是什麼〉負責，本文不重複。本文屬於《網頁程式語言》系列，總覽見〈網頁程式設計是什麼〉。
一、HTML5 是什麼？
HTML5 是 HTML（超文本標記語言）的第五個主要版本，W3C 於 2014 年正式發布為建議標準，新增了語意化標籤、原生影音、Canvas、新表單類型與多種瀏覽器 API，目的是讓網頁不依賴外掛就能承載多媒體與應用程式等級的互動。
今天說的「HTML5」其實已經是一個泛稱：2019 年起 W3C 與 WHATWG 達成協議，HTML 改由 WHATWG 以「Living Standard」持續更新，不再有 HTML5.1、5.2 這類版號。所以所有現代瀏覽器支援的就是「最新的 HTML」，只是大家習慣繼續叫它 HTML5。文件開頭的 <!DOCTYPE html> 就是這個標準的宣告，不再有 HTML 4 時代那一長串 DTD 網址。
二、從 HTML 4 到 HTML5：為什麼要改
HTML 4.01（1999 年）設計時網頁是文件，HTML5 設計時網頁已經是應用程式，兩者要解決的問題不同。
| 項目 | HTML 4.01 / XHTML 1.0 | HTML5 |
|---|---|---|
| 文件宣告 | 一長串 DOCTYPE 與 DTD 網址，分 Strict、Transitional | <!DOCTYPE html> |
| 頁面結構 | 只有 <div> 加 class 或 id，結構靠命名慣例 | <header>、<nav>、<main>、<article> 等語意化標籤 |
| 影音 | 依賴 Flash、Silverlight、QuickTime 等外掛 | 原生 <video>、<audio> |
| 繪圖與動畫 | Flash、Java Applet | <canvas>、內嵌 SVG、CSS 動畫 |
| 表單 | text、password、checkbox 等基本類型，驗證全靠 JavaScript | email、date、number、range 等新類型，內建驗證屬性 |
| 本機儲存 | 只有 Cookie | localStorage、sessionStorage、IndexedDB |
| 錯誤處理 | 各瀏覽器自行解讀錯誤的 HTML，結果不一致 | 明確定義解析規則，錯誤 HTML 在所有瀏覽器產生相同結果 |
| 行動裝置 | 未考慮 | 搭配 <meta name="viewport"> 與 CSS 媒體查詢做響應式設計 |
三、語意化標籤：網頁結構有了名字
HTML5 最影響 SEO 的改變，是用有意義的標籤取代滿頁的 <div>，讓瀏覽器、螢幕閱讀器、搜尋引擎與 AI 都能直接讀出「哪一塊是主文、哪一塊是導覽」。
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>頁面標題</title>
</head>
<body>
<header>網站標誌與主要導覽 <nav>…</nav></header>
<main>
<article>
<h1>文章標題</h1>
<section>第一段內容</section>
<figure><img src="…" alt="圖片說明"><figcaption>圖說</figcaption></figure>
</article>
<aside>側欄：相關文章、廣告</aside>
</main>
<footer>版權、聯絡資訊</footer>
</body>
</html>
<main>一頁只有一個，標示主要內容；<article>是可獨立存在的內容單元；<section>是主題區段；<aside>是側欄或補充。<header>、<footer>、<nav>不限於整頁，一篇 article 內也可以有自己的 header 與 footer。<figure>與<figcaption>讓圖片與圖說形成一組，<time>、<mark>、<details>等也是 HTML5 新增。
各標籤的完整語法與用法教學，見〈HTML 是什麼〉的語意化標籤一節。
四、原生多媒體與繪圖：video、audio、canvas、svg
<video>與<audio>：直接在頁面播放影音，可設定控制列、自動播放、字幕（<track>）與多種格式備援，不需要任何外掛。這是 Flash 走向終結的直接原因，Flash 與 ActionScript 的退場過程見〈ActionScript 是什麼〉。<canvas>：一塊由 JavaScript 逐像素繪製的畫布，遊戲、圖表、影像處理都靠它；WebGL 進一步在 canvas 上提供 3D 繪圖。- 內嵌 SVG：向量圖形可以直接寫在 HTML 裡、用 CSS 與 JavaScript 控制，圖示與資訊圖表放大不失真。
五、表單的新輸入類型與驗證
<form method="post" action="/inquiry">
<label>電子郵件 <input type="email" name="email" required></label>
<label>聯絡電話 <input type="tel" name="phone" pattern="09[0-9]{8}" placeholder="0912345678"></label>
<label>預算 <input type="number" name="budget" min="10000" step="1000"></label>
<label>希望上線日 <input type="date" name="launch"></label>
<label>需求說明 <textarea name="note" maxlength="500"></textarea></label>
<button type="submit">送出詢價</button>
</form>
- 新類型：email、url、tel、number、range、date、time、color、search 等，手機會自動切換對應的鍵盤。
- 內建驗證：
required、pattern、min、max、maxlength讓瀏覽器在送出前先擋掉格式錯誤，不必每個欄位都寫 JavaScript。 - 但伺服器端仍要驗證：瀏覽器驗證可以被繞過，後端程式必須再檢查一次，這一點在各語言專文都有強調。
六、瀏覽器 API：HTML5 讓網頁變成應用程式
HTML5 這個名字底下常被一併算進去的，還有一組讓網頁具備應用程式能力的 JavaScript API。
- Web Storage（localStorage、sessionStorage）：在瀏覽器儲存資料，比 Cookie 大、不隨每次請求送出。
- Geolocation：在使用者同意下取得位置，店家查詢與導航常用。
- History API：不重新載入頁面也能改變網址與瀏覽紀錄，單頁式應用靠它讓每個畫面有自己的網址。
- Web Workers、WebSocket：背景執行運算、與伺服器維持雙向即時連線。
- 拖放、離線快取（Service Worker）、通知：漸進式網頁應用（PWA）的基礎。
這些 API 的操作語言是 JavaScript，基礎見〈JavaScript 語法介紹〉；不重新載入頁面就向伺服器取資料的做法，見〈AJAX 是什麼〉。
七、HTML5 對 SEO 與 AI 搜尋的影響
HTML5 本身不是排名因素，但它提供的語意結構是搜尋引擎與 AI 理解頁面的基礎。
- 結構可讀：Google 與 AI 搜尋引擎會用
<main>、<article>、<nav>判斷哪裡是主要內容、哪裡是樣板，語意化標籤讓正文更容易被正確擷取與引用。 - 標題層級：HTML5 曾允許每個 section 自成一套 h1 大綱，但瀏覽器與搜尋引擎從未真正實作，實務上仍應維持一頁一個 h1、依序使用 h2、h3；做法見〈H1 到 H6 標題標籤教學〉。
- 影音與圖片可索引：原生 video 加上結構化資料能進影片搜尋；Flash 內容一向難以被完整索引，Google 搜尋也已在 2019 年停止索引 Flash。
- 行動友善：viewport 與響應式設計是行動優先索引的前提，HTML5 是這一切的載體。
八、舊網站是不是還停在 HTML 4？五個檢查點
我們評估網站改版時，用五個訊號判斷一個網站有沒有跟上 HTML5，任一命中就代表改版時要重做結構而不只是換皮。
- 原始碼第一行不是
<!DOCTYPE html>，而是帶 DTD 網址的長宣告，或根本沒有宣告。 - 版面用
<table>排版、用<font>、<center>等已廢棄標籤控制外觀。 - 頁面裡有
<object>、<embed>載入 .swf，也就是 Flash 元件。 - 沒有
<meta name="viewport">，手機開起來是縮小的桌機版。 - 整頁只有
<div>與<span>，沒有任何語意化標籤，也沒有lang屬性。
本站（newscan.com.tw）的文章版型即以 HTML5 語意標籤建構，每篇文章都放在 article 內、章節用 section 切分、圖片用 figure 包裝，這也是我們在檢查 AI 搜尋擷取內容時觀察到最穩定的結構。
九、結論
HTML5 讓網頁從文件變成應用程式：語意化標籤給結構命名、原生影音與 Canvas 取代外掛、新表單與 API 讓互動不必依賴外部技術，而且它已經是唯一的現行標準。網站主不必懂每個標籤，但要確認自己的網站通過第八節的五個檢查；想學怎麼寫，從〈HTML 是什麼〉開始。
十、常見問答 FAQ
HTML5 是什麼？
HTML5 和 HTML 有什麼不同？
HTML5 對 SEO 有幫助嗎？
HTML5 可以取代 Flash 嗎？
怎麼知道我的網站是不是 HTML5？
參考來源
- WHATWG，〈HTML Living Standard〉，WHATWG 現行標準。
- W3C，〈W3C and WHATWG to work together to advance the open Web platform〉，W3C，2019。
- MDN Web Docs，〈HTML elements reference〉，Mozilla。
- Google Search Central，〈SEO 入門指南：善用網頁標題與內容結構〉，Google 官方文件。
- Google Search Central Blog，〈Goodbye, Flash〉，Google，2019。
- 新視野網頁設計，〈HTML 是什麼？網頁的骨幹：語法、架構與入門教學〉，本站自有內容。
標準沿革依 W3C 與 WHATWG 公告整理；第八節為本站評估網站改版時的檢查項目，本站文章版型的結構描述為自身實作，不涉及特定客戶資料。
