HTML4 與 HTML5：標準演進的背景差異
1990 年代是 HTML 規範快速演進的時期，HTML4 在 1997 年成為 W3C 的推薦標準。然而，在 HTML4 發布之後，W3C 專注於 XML 為基礎的 XHTML 技術，甚至一度停止了對傳統 HTML 的升級開發。W3C 將精力投入 XHTML1 (2000 年發布) 以及與 HTML4 不相容的 XHTML2，試圖以全新的結構取代 HTML。這導致傳統 HTML 規範的發展陷入停滯，但網路應用的需求卻與日俱增。
WHATWG（Web Hypertext Application Technology Working Group）的成立正是基於上述背景。2004 年，由於對 W3C 聚焦 XHTML 而忽視 HTML 演進的不滿，Apple、Mozilla、Opera 等瀏覽器廠商聯合發起了 WHATWG 組織，開始自行研擬新的 HTML 標準。WHATWG 致力於延續 HTML4 並增強其功能，強調與既有網頁的向下相容（Backward Compatibility）以及滿足 Web 應用的實際需求。他們起草的規範最初稱為 "Web Applications 1.0"，後來正式命名為 HTML5。這份草案證明了在不破壞相容性的前提下，擴充 HTML4 來實現更強大的功能是可行的。
隨著 WHATWG 的推進，W3C 終於在 2006 年重新關注 HTML 的發展，並於 2007 年成立了新的 HTML 工作小組，決定將 WHATWG 的 HTML5 草案作為起點共同開發。自此，W3C 與 WHATWG 開始並行合作 HTML5 標準：W3C 將 HTML5 規範化、進行嚴格的版本發布流程，而 WHATWG 則保持草案的實時更新（Living Standard）模式。兩者的目標有所不同：W3C 傾向於定期發布穩定的版本（如 HTML5、HTML5.1），而 WHATWG 則不斷增修功能、即時糾正問題且不發佈凍結的版本。這導致一段時間內存在 W3C 與 WHATWG 兩套 HTML5 規範並行的局面。不過，隨著時間推進，雙方在 2019 年達成協議：未來僅維持 WHATWG 的 HTML Living Standard 作為唯一的 HTML 標準。換言之，HTML5 之後將不再有 HTML6 的版本號，HTML 將以「活的標準」形式持續演進更新。
（小提示：在 HTML5 成為主流後，我們通常直接稱之為 "HTML"。目前最新的 HTML 規範是活標準，已不再使用版本號。）
HTML4 vs HTML5 的主要差異概述
相較於前一代標準 HTML4，HTML5 帶來了全方位的改進，包括語法層面的簡化以及功能性的強化：
- 文件類型宣告（DOCTYPE）簡化：HTML4/XHTML 時期的 DOCTYPE 往往又長又複雜，而 HTML5 則將其簡化為短短一行
<!DOCTYPE html>，瀏覽器依據此宣告即可啟用標準模式渲染。這使開發者不再需要背誦冗長的 DTD 宣告。 - 語法與容錯：HTML5 定義了更完善的解析模型，對大小寫不敏感，並兼容傳統 HTML4 大多數語法。比如，HTML4 中必須透過
<meta http-equiv="Content-Type">指定的編碼宣告，在 HTML5 中可用更簡潔的<meta charset="UTF-8">取代。又如，以往 XHTML 要求空標籤（如<br>、<img>）使用自閉合斜線，HTML5 中則無此嚴格要求（雖然允許加上斜線，但不是必需）。總之，HTML5 的語法對開發者更加友好，同時保有向下相容性。 - 廢棄過時元素：HTML4 中許多純表現用途的標籤（例如
<font>、<center>等）在 HTML5 規範中被標示為不建議使用或移除，因為這些效果應以 CSS 達成。然而，由於相容性考量，主流瀏覽器仍然會支援這些舊元素與屬性的渲染。HTML5 將規範對作者（開發者）和用戶代理（瀏覽器）的要求分開，開發者應避免使用過時標籤，但瀏覽器仍需處理舊內容，以確保既有網站能正常運作。
以上種種差異說明：HTML5 並非與過去截然不兼容的全新語言，而是在 HTML4 基礎上的演進與擴充。它取代了 HTML4 作為新的標準，但同時設計上考慮了舊內容與舊瀏覽器的相容，讓網頁開發能平穩過渡。接下來，我們將深入介紹 HTML5 引入的核心功能特性。
HTML5 的核心特性與創新
HTML5 作為新一代的網頁標準，新增了眾多功能來滿足現代網站和 Web 應用的需求。以下分幾個面向介紹 HTML5 的重要創新，包括語義化標籤、音訊影片與圖形、表單功能加強，以及 JavaScript API 支援等。
語義化標籤：更有意義的頁面結構
在 HTML4 時代，開發者往往使用大量無語義的 <div> 來布局網頁，機器難以理解內容的結構。HTML5 引入了許多語義化（Semantic）的區塊標籤，使 HTML 文件結構更清晰明瞭。典型的新語義標籤包括：
<header>：頁首區域，可包含標題、導覽列等內容<nav>：導航區塊，專門用於一組導覽連結<section>：通用章節區段，用於將頁面內容分成主題段落<article>：獨立的文章內容，適用於博客貼文、新聞稿等獨立單元<aside>：旁支內容，表示與主要內容相關性較低的側欄或附加資訊<footer>：頁尾或區段尾部，通常包含版權資訊、作者資料等
這些標籤直觀地定義了頁面的結構語意，例如使用 <nav> 包裹導覽連結區塊，比單純使用 <div id="nav"> 更能讓瀏覽器和開發者理解「這部分是導航」。同時，語義化標記對 SEO 和無障礙輔助技術也更友好：搜尋引擎爬蟲和讀屏軟體能更正確地解讀內容層次，提升資訊檢索和可及性體驗。
除了上述區塊元素，HTML5 也提供了許多內聯語義標籤，例如 <mark> 用於標記重點文字、<time> 定義日期時間、<progress> 和 <meter> 顯示進度或度量值、<details>/<summary> 則可用來實作可展開的細節區塊等。透過這些新元素，HTML 文件不僅在外觀上呈現資訊，更蘊含了結構和語義，令代碼可讀性與維護性大幅提升。
語義化標籤範例：下面是一個簡單的 HTML5 網頁結構範例，展示如何運用 <header>, <nav>, <article>, <aside>, <footer> 等語義元素構建語義清晰的版面：
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<title>語義化標籤示例</title>
</head>
<body>
<header>
<h1>我的網站</h1>
<nav>
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">關於我們</a></li>
<li><a href="#">聯絡</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>文章標題</h2>
<p>這是一段示範文章內容，展示使用 HTML5 語義標籤來撰寫段落。</p>
</article>
<aside>
<h3>側欄</h3>
<p>這裡是側欄內容，可以放附加資訊或相關連結。</p>
</aside>
</main>
<footer>
<p>© 2025 我的網站版權所有</p>
</footer>
</body>
</html>
上述範例中，我們使用了 <header> 作為頁首，內含網站標題和 <nav> 導覽選單；主要內容部分由 <main> 包含，其中有主要的 <article> 文章和側邊的 <aside> 附屬資訊；最後以 <footer> 作結尾。相比傳統 HTML4 所有區塊都用 <div>，這樣的標記方式讓結構與語意一目了然。
多媒體與圖形：音訊、影片直覺融入網頁
HTML5 讓多媒體在網頁上的呈現變得前所未有的簡單和強大。以往在 HTML4 時期，嵌入影片或音訊通常需要藉助外掛程式（如 Flash）。如今 HTML5 原生支援音訊與影片，提供了語意化標籤和對應的 API：
<video> 元素用於嵌入影片內容，<audio> 元素用於音訊內容。這兩者都內建播放控制介面，只需加上 controls 屬性，瀏覽器就會顯示播放/暫停、進度條等控制項。開發者也可透過 JavaScript API 自訂播放器介面。例如，要在頁面中插入一段 MP4 視訊，只需：
<video src="video.mp4" controls width="400" height="300"> 對不起，您的瀏覽器不支援 HTML5 視訊播放。 </video>
如上，倘若使用者的瀏覽器不支援 <video>，中間的後備文字會顯示提示（不過現代瀏覽器大多均已支援）。相比以前必須編寫繁瑣的 <object> 或嵌入 Flash，HTML5 的做法要簡潔得多。
<track> 元素可配合 <video>/<audio> 提供字幕或描述等文字軌。多媒體元素還支援多來源設定：使用 <source> 子元素可以指定多種格式的檔案，瀏覽器將選擇支援的來源播放。
<canvas> 畫布元素帶來了即時繪圖能力。<canvas> 本身是一個矩形區域，可以透過 JavaScript 取得其繪圖上下文（context），使用一套 2D 繪圖 API 動態地在上面繪製圖形。開發者能利用它實現圖表、動畫，甚至簡單遊戲。在 HTML5 時代，結合 Canvas 的繪圖、以及隨後推出的 WebGL 3D 繪圖接口，讓很多過去需要 Flash 才能完成的豐富內容改由原生 Web 技術達成，極大地提升了網頁的表現力。
值得一提的是，HTML5 的多媒體出現不僅豐富了內容呈現，也標誌著網頁技術對封閉插件技術的超越——例如隨著 <video>/<audio> 的普及，Flash 等插件逐漸退出歷史舞台。現在，音樂、影片、圖形動畫都可以透過開放標準的 HTML5 技術來實現。
表單功能大躍進：更聰明的表單控制項
Web 表單是互動性網站的關鍵組成，而 HTML5 大幅強化了表單相關的元素和屬性，令使用者輸入體驗和前端驗證變得更加便利強大。以下整理了 HTML5 表單方面的重要新特性：
- 更多樣的輸入類型：HTML5 在
<input>的 type 屬性中新增了許多實用的值，例如電子郵件 (email)、網址 (url)、電話號碼 (tel)、日期 (date)、時間 (time)、週 (week)、月份 (month)、數字 (number)、範圍滑杆 (range)、色彩選擇器 (color) 等。使用這些新類型，瀏覽器會自動為相應的輸入提供專門的介面或功能。例如，<input type="date">在支援的瀏覽器中會出現日期挑選器，<input type="color">會彈出顏色選取器；對於 email、url 等類型，瀏覽器還能在提交前驗證輸入格式是否正確。這些改變讓使用者得到更友好的輸入體驗，同時減輕了開發者在前端編寫驗證腳本的負擔。
新增的表單屬性：HTML5 為表單控件增添了許多實用屬性來簡化常見需求。例如：
placeholder：讓<input>或<textarea>顯示灰色提示文字，指引使用者該欄位需要輸入的內容。當欄位聚焦或有輸入時，提示文字自動消失。required：將輸入欄位標記為必填，若未填寫即試圖提交表單，瀏覽器會自動阻止並提示。autofocus：自動將頁面加載後的游標焦點聚焦到指定的表單欄位，方便使用者直接開始輸入。pattern：搭配 input 使用，允許開發者定義一個正則表達式模式來驗證輸入格式是否符合要求（例如郵政編碼格式等），不符合時瀏覽器會阻止提交。multiple：允許一個輸入欄位接受多個值（如多個 email 地址），通常配合特定類型使用。min、max、step：對 number, date, range 等類型，設定允許的最小/最大值及步進值，瀏覽器會據此校驗輸入範圍。
此外還有 datalist 元素可以配合 <input list> 屬性實現自動完成功能（下拉選單提示）、output 元素可作為計算或顯示輸出的容器、progress 和 meter 元素前面提過可表示進度條和度量值等等。所有這些新屬性與元素大大提升了表單的原生交互體驗。在 HTML4 時代，需要額外撰寫大量 JavaScript 或借助第三方函式庫才能實現的功能，如今透過簡單的標記即可達成，並且由瀏覽器原生支援其行為，可靠且高效。
表單新功能範例：以下範例展示了一個使用 HTML5 新表單特性的註冊表單片段：
<form>
<label>電子郵件：
<input type="email" name="email" placeholder="name@example.com" required>
</label><br>
<label>出生日期：
<input type="date" name="birthdate">
</label><br>
<label> 個人色彩：
<input type="color" name="favorite_color" value="#ff0000">
</label><br>
<button type="submit">送出</button>
</form>
在這個表單中，type="email" 的輸入欄位會自帶基本的 email 格式檢查，不符合 email 格式將無法通過；placeholder 提供了灰色範例郵件地址提示；required 則強制要求電子郵件必填。type="date" 的欄位點擊時會跳出日期選擇器（取決於瀏覽器實作）；type="color" 則會顯示顏色挑選工具並以預設值 #ff0000（紅色）填入。這些功能都是 HTML5 原生提供的，大大減少了額外程式的編寫，提升了用戶體驗和表單資料的正確性。
強大的 API 支援：讓網頁應用更上層樓
HTML5 的另一個顛覆性改變是與之伴隨出現的各種 JavaScript API，為瀏覽器賦予了接近桌面應用的能力。HTML5 時代的瀏覽器不再只是顯示靜態頁面，而成為可以執行各種應用程式邏輯的平台。以下是幾項與 HTML5 息息相關的重要 Web API（部分由其他標準制定但通常統稱為「HTML5 技術」的一環）：
- 離線存儲與資料庫：透過 Web Storage API，提供了 localStorage 和 sessionStorage 機制，可在用戶端以鍵值對方式儲存資料，比傳統的 Cookie 更便利、安全容量也更大。這讓網站能在瀏覽器端保存狀態，例如記住使用者設定等。而更大型的資料需求則有 IndexedDB API 可以使用。早期 HTML5 規範也包含應用快取 (AppCache) 功能，用於離線應用，但現已被 Service Workers 等技術取代。
- 地理定位 (Geolocation API)：允許網站（經使用者授權）讀取裝置的地理位置。這對地圖服務、LBS 應用非常關鍵。開發者只需呼叫瀏覽器提供的
navigator.geolocation.getCurrentPosition()等方法即可獲取經緯度。 - 多媒體操作：除了上述
<video>/<audio>元素本身，HTML5 還提供了用於程式化控制音視頻播放的 API，例如可以透過 JavaScript 暫停、播放影音、調整音量、監聽播放進度事件等。此外，WebRTC 標準的出現（雖非 HTML5 規範本身，但與其同代）甚至使瀏覽器具備了攝影機、麥克風即時通訊的能力。 - 圖形和動畫：Canvas 的 2D 繪圖 API 提供即時繪製點線面和圖像的能力；WebGL 則讓 JavaScript 能直接調用 GPU 進行 3D 圖形渲染，實現基礎的 3D 遊戲或視覺化。在 HTML5 的推動下，瀏覽器成為名副其實的多媒體和遊戲平台。
- 拖放 (Drag and Drop)：HTML5 定義了拖放的 API，元素可設定
draggable="true"屬性讓其可拖拽，並透過一系列事件（dragstart, dragover, drop 等）讓開發者定制拖放行為。這使實現拖放功能不再需要額外的函式庫。 - 歷史紀錄管理 (History API)：引入
history.pushState()和 onpopstate 等，讓開發者可以在單頁應用中修改瀏覽器歷史記錄，實現無刷新改變 URL 而不破壞返回鍵功能。這對 SPA（單頁應用）框架的興起有重大意義。 - 文件編輯 (ContentEditable)：HTML5 將元素的 contenteditable 屬性標準化，設為 true 即可使元素內容變為可在前端編輯，並提供對應的編輯命令 API。這為所見即所得編輯器的實現提供了原生支持。
以上僅列舉了部分常用的 API。事實上，HTML5 時代還湧現了Web Worker（背景執行緒）、WebSocket（雙向即時通訊）、Server-Sent Events（伺服器推送）、File API（檔案讀取）、Notifications API 等眾多功能。這些創新使得 Web 平台有能力構建更豐富、更貼近桌面體驗的應用程式。如今開發者可以使用這些 API 開發出離線可用、即時通訊、圖形密集的 Web 應用，大幅拓展了瀏覽器的應用場景。HTML5 的出現，標誌著 Web 前端技術從頁面時代進入了應用程式時代。
常見問答 (Q&A)
最後，讓我們以問答形式回答幾個關於 HTML5 的常見問題，加深對上述內容的理解。
問：HTML5 是否已經完全取代了 HTML4？現有網站需要全部改寫嗎？
答：是的，從標準角度而言 HTML5 已取代 HTML4 成為現行的 HTML 規範。W3C 早已不再維護舊版 HTML4 的規範，建議所有新專案使用 HTML5 的 doctype 及元素。值得慶幸的是，HTML5 充分考慮了向下相容：大多數基於 HTML4 的舊網頁在現代瀏覽器中依然可以正常運作，因為瀏覽器會繼續支援舊有的標籤和屬性。開發者無需把既有網站全部重寫一遍，但非常建議在維護或升級時逐步替換過時的語法，切換到簡潔的 <!DOCTYPE html>，並採用 HTML5 提供的新語義標記和功能。這樣可提升頁面效能、可用性及未來的維護性。同時要注意，像 <font>、<center> 這類過時的標籤已不再建議使用，應改用 CSS 達成同樣效果。
問：在 HTML5 中，我是否仍需要為每個元素書寫閉合標籤？聽說有些標籤可以不用閉合？
答：大部分情況下，需要閉合。HTML5 的語法規則與 HTML4 相似：常規的非空元素（如段落 <p>、<div>、列表項 <li> 等）應該使用明確的閉合標籤來包裹內容，這是良好的編碼風格。而 空元素（Void elements）則本來就不含內容，例如 <br>、<img>、<input>、<meta> 等，它們在 HTML 中是單標籤，不能有對應的閉合標籤。在 XHTML 語法裡我們習慣寫成 <br /> 帶斜線的形式，但在 HTML5（HTML 語法）中 <br> 寫法已經足夠，結尾的斜線可有可無。此外，HTML5 定義了一些元素的可選閉合情形：例如一段 <p> 文本如果後面直接跟另一個段落開始標籤，瀏覽器會自動推斷前一個 <p> 結束；表格的 <tr>、<td> 若結束後遇到新的行開始也會自動閉合先前元素。但是，這些都是解析器的容錯機制，並不意味著我們可以隨意省略閉合標籤。為了程式碼清晰和減少瀏覽器誤判，開發者仍應明確閉合所有非空元素。總之，遵循嚴謹的 HTML 標記習慣在 HTML5 中依然重要，只是在某些語境下瀏覽器會替你補全，這並非建議省略的理由。
問：舊版瀏覽器對 HTML5 的支援如何？需要為相容性做什麼特殊處理嗎？
答：現今主流瀏覽器（如 Chrome、Firefox、Safari，以及基於 Chromium 的新版 Edge 等）對 HTML5 的支援都非常完善。早在 HTML5 尚未正式定案時，各大瀏覽器已陸續實作了其功能特性。只有非常老舊的瀏覽器版本（例如 Internet Explorer 8 及更早）不支援部分 HTML5 新元素和 API。例如，IE8 無法識別新的語義標籤（header/nav 等），導致這些元素在該瀏覽器中默認呈現為行內元素且無法用 CSS 樣式。針對此類情況，開發者過去會使用 HTML5 Shiv 等向下相容腳本，讓 IE8 認識新元素並正確渲染。所幸這類老舊瀏覽器的市佔率如今微乎其微，大多數開發者無需再為其特別優化。換言之，如果您的受眾主要使用現代瀏覽器，您可以大膽地使用各種 HTML5 特性而不必太擔心相容性問題。但若有極端相容需求，依然可以透過加載相應的 polyfill（填補程式碼）來解決。
問：未來還會有 HTML6 嗎？HTML 標準以後如何演進？
答：不會有傳統意義上的 HTML6。正如前文所述，自 HTML5 之後，W3C 和 WHATWG 已共同轉向將 HTML 規範維持為Living Standard（活的標準）。這意味著 HTML 標準會不斷隨需求演進，而不是累積多年再發布一個大的版本號更新。實際上，HTML5 正式成為 W3C 推薦標準（Recommendation）是在 2014 年，此後 W3C 曾短暫發布過 HTML5.1、HTML5.2 等版本，但在 2019 年與 WHATWG 達成共識後，未來的 HTML 規範將以 WHATWG 的持續更新版本為準，不再使用版本編號。對開發者而言，這代表您應始終使用最新的 HTML（也就是 HTML5 及後續增補的集合），例如使用最新的 <!DOCTYPE html>，並關注瀏覽器廠商的更新以了解新增加的功能或元素。雖然我們口頭上可能還是會提到「HTML5 技術」，但實際上這指的是包含 ES6+、CSS3 等在內的整套現代 Web 技術生態，而非有一份名為 HTML5 的靜態規範了。
總結
經過上述介紹，相信您對從 HTML4 演進到 HTML5 的整個歷程以及 HTML5 帶來的新特性能有更全面的理解。總而言之，HTML5 的出現標誌著網頁開發進入了一個嶄新的時代——在這裡，網頁不再只是靜態資訊展示，而是可以構建豐富互動應用的平台。
對於開發者來說，掌握 HTML5 不僅是學習了新的標籤和 API，更是理解了一套與時俱進的開發思維：遵循標準、語義優先、提升用戶體驗，以及充分運用瀏覽器強大的原生能力。希望本篇中級指南能夠讓您在實踐中運用 HTML5 時更加得心應手，打造出现代化、高效且具備未來性的網站。
歡迎勇於探索 HTML5 提供的各種可能性，持續關注 Web 標準的演進，相信您會在這趟網頁標準的旅途中收穫良多！
