HTML（HyperText Markup Language）是構建網頁的標準標記語言，而 HTML5 是 HTML 的最新版本，包含了一些新的功能、元素、API 和屬性。HTML5 相對于早期版本的 HTML（比如 HTML4）有許多重要的改進和變化。以下是 HTML 和 HTML5 之間的一些主要區別：
1. 文檔類型聲明（Doctype）
HTML：HTML4 使用的是較為復雜的 DOCTYPE 聲明，如：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML5：HTML5 使用的是簡化的 DOCTYPE 聲明：
<!DOCTYPE html>
這個變化使得 HTML5 的文檔聲明更加簡潔易讀。
2. 語義化標簽
- HTML：HTML4 中沒有很多語義化的標簽，網頁的結構通常是通過 和 等標簽來構建的，缺乏對頁面內容的描述。
- HTML5：引入了許多新的語義化標簽，使得頁面結構更加清晰、易讀，且對搜索引擎優化（SEO）有幫助。常見的 HTML5 語義標簽包括：
<header>：定義頁面或部分的頭部。
<footer>：定義頁面或部分的底部。
<nav>：定義導航鏈接。
<article>：定義獨立的內容塊。
<section>：定義文檔中的節或部分。
<aside>：定義與頁面內容相關的附加信息，如側邊欄。
<figure> 和 <figcaption>：定義圖像和圖像的標題。
3. 多媒體支持
- HTML：HTML4 沒有原生支持音頻和視頻，通常需要使用插件（如 Flash）來播放多媒體內容。
- HTML5：HTML5 引入了原生的多媒體元素，直接支持音頻和視頻播放，使用 和 標簽。例如：
<audio controls><source src="audio.mp3" type="audio/mp3">Your browser does not support the audio element.
</audio><video controls><source src="video.mp4" type="video/mp4">Your browser does not support the video element.
</video>4. 本地存儲
- HTML：HTML4 沒有提供本地存儲的功能，開發者通常依賴于 cookie 來存儲數據，但 cookie 存儲的數據量非常有限（通常為 4KB）。
- HTML5：HTML5 引入了本地存儲機制，提供了 localStorage 和 sessionStorage，這使得網頁能夠在用戶的瀏覽器中存儲大量數據，且存儲的數據不會被清除直到主動刪除：
localStorage：無過期時間的數據存儲，數據在瀏覽器關閉后依然存在。sessionStorage：在會話期間存儲數據，瀏覽器窗口關閉時數據會被清除。
5. 新的表單控件
- HTML：HTML4 的表單控件相對基礎，只支持傳統的輸入類型（如文本框、單選框、復選框、按鈕等）。
- HTML5：HTML5 引入了許多新的表單元素和輸入類型，增強了表單功能。例如：
新的輸入類型：email、tel、number、date、time、url、range 等。
新的表單控件：<datalist>（提供自動完成的輸入框）、<progress>（顯示進度條）、<meter>（顯示度量數據）等。
<input type="email" placeholder="Enter your email">
6. Canvas 和 SVG
-
HTML：HTML4 沒有內建的支持用于繪圖和圖形的功能。
-
HTML5：引入了 元素，允許開發者使用 JavaScript 繪制圖形、圖表、動畫等。HTML5 還加強了對 SVG（可縮放矢量圖形）的支持。
<canvas id="myCanvas" width="200" height="100"></canvas>
7. Web API（Web 應用接口）
- HTML4：HTML4 沒有提供直接的 Web 應用接口。
- HTML5：HTML5 引入了許多新的 Web API，使得開發者可以實現更多的功能，例如：
Geolocation API：獲取用戶的位置信息。
Web Workers：實現多線程處理，提升應用性能。
WebSockets：進行實時雙向通信。
File API：允許瀏覽器直接訪問文件系統并讀取文件。
Offline Storage：用于離線應用，允許將數據緩存到本地。
8. 移除了一些過時的元素和屬性
- HTML：HTML4 中有一些不再推薦使用的元素和屬性，如 、
、 等。
<font>、<center>、<strike>
- HTML5：移除了這些過時的元素和屬性，推薦使用 CSS 來處理樣式和布局。
9. 更好的兼容性
- HTML5：HTML5 更加注重跨平臺和跨設備的兼容性，支持現代瀏覽器、移動設備、觸摸屏等設備，并且能更好地支持響應式設計。
10. 離線支持
- HTML：HTML4 不支持離線應用。
- HTML5：HTML5 引入了 AppCache 和 Service Workers，支持離線應用，使得應用在沒有網絡連接時依然能正常運行。
11. 總結
- HTML 是構建網頁的基礎標準，它提供了網頁結構和內容的基本定義。
- HTML5 是 HTML 的最新版本，加入了許多新的功能和元素，如新的語義標簽、音視頻支持、表單控件、Canvas、Web API、離線支持等，使得開發更為現代化、功能更強大。
HTML5 的引入使得網頁和應用變得更加豐富，支持多媒體、圖形、動畫、數據存儲等功能，提升了用戶體驗，并且讓開發者能夠更方便地構建跨平臺的網頁和應用。
