HTML5 新標籤超進化！不只更好用，還更聰明！
還在用舊的 HTML 嗎？快來認識 HTML5 的新標籤吧！它們不僅讓網頁程式碼更簡潔、更有條理，還能讓網頁變得更強大、更聰明！
HTML5 到底是什麼？
簡單來說，HTML5 就是 HTML 的進化版！它新增了很多厲害的功能和標籤，讓網頁不再只是靜態的文字和圖片，還能加入影片、音樂、動畫、互動效果等等，就像幫網頁打了超級瑪利歐的蘑菇一樣，瞬間升級！
HTML5 新標籤：讓網頁更「語義化」
什麼是「語義化」？就是讓網頁的程式碼更有意義，不只你看得懂，電腦（像是 Google 搜尋引擎）也看得懂！這樣有什麼好處？
- 程式碼更好懂： 以前我們都用 `<div>` 來包所有東西，現在有了專門的標籤，一看就知道哪裡是網站的標題、哪裡是導覽列、哪裡是文章內容。
- 對搜尋引擎更友善： 搜尋引擎可以更輕鬆地理解網頁的內容，更容易找到你的網站！
- 無障礙網頁： 讓視障朋友使用的螢幕閱讀器更容易理解網頁結構，打造更友善的網路環境。
來看看 HTML5 新增了哪些超好用的語義化標籤吧！
結構標籤
- `<header>`：網站或區塊的「頁首」，通常放網站標題、Logo、導覽列。
- `<footer>`：網站或區塊的「頁尾」，通常放版權資訊、聯絡方式。
- `<nav>`：「導覽列」，放網站的主要選單連結。
- `<aside>`：「側邊欄」，放一些附加資訊，像是文章列表、廣告等等。
- `<main>`: 網頁的主要內容區塊.
- `<article>`：一篇獨立、完整的內容，像是部落格文章、新聞報導。
- `<section>`：網頁中的一個區塊，通常會有一個標題。
以前我們可能會這樣寫：
現在可以直接用：
是不是更清楚了呢？
<div id="header">...</div>
<div id="footer">...</div>
<div id="nav">...</div>
<header>...</header>
<footer>...</footer>
<nav>...</nav>
多媒體標籤
- `<video>`：直接在網頁中嵌入影片，不用再依賴 Flash 啦！
- `<audio>`：直接在網頁中嵌入音樂或音效。
- `<source>`：搭配 `<video>` 和 `<audio>` 使用，可以指定多個影片/音訊來源，讓瀏覽器自動選擇最適合的格式。
- `<track>`：搭配 `<video>` 和 `<audio>` 使用，可以加入字幕或標題。
- `<canvas>`: 可以用 Javascript 在上面畫圖, 做動畫, 做遊戲。
表單標籤
- `<datalist>`：幫你的 `<input>` 輸入框加上自動完成建議清單！
- `<output>`：顯示計算結果或使用者操作的結果。
- 新的 `input` 類型：再也不用自己寫程式碼驗證 Email、網址、日期！HTML5 直接內建了！
- `email`
- `url`
- `date`
- `number`
- `range`
- `color`
- `tel`
- `search`
其他實用標籤
- `<figure>` 和 `<figcaption>`：用來放圖片和圖片說明，語意更清楚！
- `<mark>`：把某些文字標記起來，就像用螢光筆畫重點一樣！
- `<time>`：表示日期或時間，讓搜尋引擎更容易理解。
- `<details>` 和 `<summary>`: 可以做出展開/收合的效果.
- <progress>: 顯示進度條
HTML vs. HTML5 比一比
為了讓大家更清楚 HTML5 的厲害之處，我們來做個比較表：
| 特性 | HTML (HTML 4.01) | HTML5 |
|---|---|---|
| DOCTYPE 宣告 | 落落長的一串 | <!DOCTYPE html> 超級簡潔！ |
| 語義化 | 主要靠 `<div>` 和 `<span>`，沒有明確語義 | 多了很多語義化標籤，程式碼更易懂，對 SEO 和無障礙網頁也更好 |
| 多媒體 | 要靠 Flash 或其他外掛程式 | 直接內建 `<video>` 和 `<audio>`，超方便 |
| 表單 | 功能比較陽春 | 多了很多新的輸入類型和屬性，驗證更容易 |
| 繪圖 | 沒辦法直接在網頁上畫圖 | 有了 `<canvas>`，想畫什麼就畫什麼 |
| 離線功能 | 沒有標準的方法 | 可以用 Service Worker 做到離線瀏覽 |
結論
HTML5 讓網頁變得更強大、更方便、更聰明！身為網頁設計師或開發者，一定要學會 HTML5，才能跟上時代的潮流！快來擁抱 HTML5 的新世界吧！