HTML5 學習地圖
HTML（HyperText Markup Language，超文字標記語言）負責網頁的內容與結構：標題、段落、連結、圖片、表單都用標籤標出來。瀏覽器讀懂這些標記後，才知道哪一段是主文、哪一個是按鈕、哪一張圖要給螢幕閱讀器念什麼。
本站只講 HTML5 最常用、最值得先學的部分。外觀交給 CSS，互動交給 JavaScript；先把骨架寫對，後面兩層才站得住。
最必須掌握的 20%
學 HTML5，先把下面六件事練熟，就能寫出一份正確、可維護、對無障礙友善的網頁：
- 一份正確的文件骨架：
<!DOCTYPE html>、html lang、head（charset、viewport、title）、body。 - 元素與屬性：開始／結束標籤、空元素、屬性寫在開始標籤裡（例如
href、src、alt）。 - 語意結構：
header、nav、main、article、section、footer，不要整頁只靠div。 - 文字內容：
h1–h6、p、a、ul／ol／li、strong／em。 - 多媒體：
img一定要有有意義的alt；影片與聲音用video／audio。 - 表單：
form、label與input配對、button做送出。
這六項對應本站各分類。其餘標籤用到再查 MDN HTML 參考 即可。
官方學習路徑
寫內容時以官方文件為準，影音用來建立直覺。建議順序：
- MDN：用 HTML 建構內容 — Mozilla 的系統化教材，從語法講到表單與除錯。
- web.dev Learn HTML — Chrome 團隊的 HTML 課程，每節有重點與小測驗。
- HTML Living Standard — WHATWG 規格，查細節時再用，不必當入門讀本。
官方認證與學習徽章
W3Cx HTML5 Coding Essentials and Best Practices 由 W3C 開設，適合想拿正式課程證明的人。
W3C Front-End Web Developer Professional Certificate 涵蓋 HTML5、CSS 與 JavaScript 五門課。
Google Developer Program：Learn HTML 完成 web.dev 課程可取得徽章。
freeCodeCamp Responsive Web Design 有互動練習，HTML 與 CSS 一起練。
推薦影音
先看短片建立心智模型，再挑一支完整課程跟著做。每頁主題也會再嵌最相關的一兩支。
HTML 是什麼（100 秒）
簡述：Fireship 用極短時間講 HTML 的歷史、head／body、標籤與屬性。適合開場，對應本頁「20%」的前兩項。
英文完整入門
簡述：Traversy Media 的 HTML Crash Course 從空白檔講到語意標籤、清單、表格與表單，約一小時，適合第一次系統學。
繁體中文入門
簡述：六角學院 Amos「金魚都能懂」用生活例子說明 HTML 標記在做什麼，以及標題、段落、清單等常見標籤。適合想先用中文建立觀念的人。
想一次看完 HTML5 各主題，可再看 Dave Gray 約四小時的 HTML Full Course for Beginners，或 freeCodeCamp 的 HTML Full Course。學完骨架後若要接 CSS，SuperSimpleDev 的 HTML & CSS Full Course 有大量練習。
建議學習順序
每寫完一小段，用瀏覽器打開檔案看結果，再用 W3C Markup Validation Service 檢查。錯誤訊息會直接對應到標籤寫錯的位置。