CH1 · HTML 詳細 ROADMAP

計畫文件，不會被 Quartz 渲染。回主 roadmap → frontend/ROADMAP.md

章節目標

HTML 不只是 <div> 堆疊。建立完整的 HTML 能力——從基礎結構到 Web Components、從語意化到 i18n、從表單到媒體、從 meta 到 HTML5 API——讓讀者具備獨立撰寫可讀、可用、可訪問、可被搜尋引擎理解的 HTML 文件的能力。

🌱 基本介紹

#	主題	Slug	Stage	大綱
01	HTML 是什麼	`01-what-is-html`	🌱	標記語言定義、瀏覽器/解析器、文件類型宣告、為什麼 DOM 是樹
02	HTML 結構基礎	⛔️ `fundamentals/html-structure`	🌿	已有（跨系列）
03	語意化標籤	`semantic`	🌿	已有

❓ 為什麼需要

#	主題	Slug	Stage	大綱
04	為什麼需要語意化 HTML（不是 div 就好？）	`04-why-semantic-html`	🌱	螢幕閱讀器、SEO、未來維護、CSS 選擇器、a11y 法規、為什麼 div soup 是技術債
05	為什麼需要 Web Components（原生 vs React/Vue 元件）	`05-why-web-components`	🌱	跨框架共用元件、Design System 底層、Shadow DOM 封裝邊界、為什麼 native 版本還沒殺死 React

🕰️ 演進

#	主題	Slug	Stage	大綱
06	HTML 版本史	`06-html-version-history`	🌱	HTML 4 → XHTML 1.0/1.1 → HTML5 → WHATWG Living Standard
07	為什麼 XHTML 曾經流行	`07-why-xhtml-was-popular`	🌱	XML 嚴格格式的時代價值、可解析性、跟 Web 2.0 工具鏈的關係、為什麼後來被棄用
08	Table 為什麼被 div 取代	`08-table-to-div-layout`	🌱	Table 佈局時代、CSS2 時代為什麼 div 贏、語意 vs 視覺的分離
09	從靜態 HTML 到 Web Components	`09-html-to-components`	🌱	HTML Include 早期嘗試、Custom Elements v0/v1、Web Components 三支柱
10	Microdata / RDFa 為什麼被 JSON-LD 取代	`10-microdata-to-jsonld`	🌱	2008–2015 結構化資料戰爭、Google 的態度、維護性 vs 簡潔性

🧠 知識型

語意化深化

#	主題	Slug	Stage	大綱
11	冷門但重要的語意化標籤	`11-lesser-known-semantic-tags`	🌱	`<figure>` / `<time>` / `<abbr>` / `<details>` / `<address>` / `<search>` / `<mark>` / `<cite>` / `<small>`
12	ARIA 和原生語意的選擇時機	`12-aria-vs-native-semantic`	🌱	「No ARIA is better than bad ARIA」、什麼時候一定要用 ARIA、role vs semantic

表單

#	主題	Slug	Stage	大綱
13	表單原生行為	`forms`	🌿	已有
14	表單進階	`14-form-advanced`	🌱	input types（date/time/number/tel/email/url）、autofill、file upload、accept、capture
15	表單 UX 最佳實踐	`15-form-ux`	🌱	label 關聯、錯誤訊息時機、tab order、行動裝置 virtual keyboard

媒體與繪圖

#	主題	Slug	Stage	大綱
16	媒體標籤	`16-media-tags`	🌱	`<img>` lazy/loading/srcset/sizes、`<picture>`、`<video>`/`<audio>` 屬性、fetchpriority
17	Video / Audio 進階	`17-video-audio-advanced`	🌱	Media Session API（鎖屏控制）、Media Source Extensions（串流）、字幕 `<track>`、WebVTT
18	Canvas / SVG 繪圖	`18-canvas-svg`	🌱	Canvas 2D vs SVG 差異、何時用哪個、Canvas 基本 API、SVG viewBox

HTML5 新能力

#	主題	Slug	Stage	大綱
19	HTML5 新增元素總覽	`19-html5-elements-overview`	🌱	dialog / details / summary / meter / progress / datalist / output / template / slot
20	原生編輯能力：contenteditable / designMode	`20-contenteditable`	🌱	`contenteditable`、`designMode`、execCommand 棄用、CMS 為什麼自搭 editor（Slate / Lexical / TipTap）

進階元件

#	主題	Slug	Stage	大綱
21	Web Components / Custom Elements	`21-web-components`	🌱	自訂元素、生命週期、slots
22	Shadow DOM	`22-shadow-dom`	🌱	封裝邊界、CSS 穿透、slot projection
23	Drag & Drop / Clipboard API	`23-drag-clipboard`	🌱	dataTransfer、文件拖曳、剪貼簿 API 安全限制

Meta 與 SEO 基礎

#	主題	Slug	Stage	大綱
24	正常網站 `<head>` 完整清單	`24-head-checklist`	🌱	charset / viewport / title / description / canonical / robots / theme-color / favicon / manifest / preload / preconnect / OG / Twitter / JSON-LD
25	Schema.org + JSON-LD 實戰	`25-schema-jsonld`	🌱	常見類型（Article / Product / Person / Organization / WebSite / BreadcrumbList / FAQPage）
26	i18n 屬性	`26-i18n-attributes`	🌱	lang / dir / hreflang / translate、雙向文字
27	Meta / OG 深入	⛔️ `seo/06`	🌿	跨系列

🔧 小實作注意事項

#	主題	Slug	Stage	大綱
28	`<dialog>` + popover + ::backdrop 實戰	`28-dialog-popover`	🌱	2024+ 新原生能力取代 Modal library、::backdrop 樣式
29	最常被誤用的 HTML 標籤合輯	`29-html-misuse`	🌱	`<b>` vs `<strong>`、`<i>` vs `<em>`、`<br>` 的誤用、`<section>` vs `<div>`
30	HTML email 注意事項	`30-html-email`	🌱	為什麼要 inline CSS、table 佈局回歸、avoiding blockers、MSO 條件註解
31	contenteditable 做最小 rich text editor	`31-min-rich-editor`	🌱	純 contenteditable 能做到哪裡、限制在哪裡

💣 Anti-pattern

#	主題	Slug	Stage	大綱
32	HTML Anti-patterns	`32-html-anti-patterns`	🌱	div 濫用、不必要巢狀、`alt=""` 誤用、`tabindex` 濫用、`onclick` 在非互動元素、重複 id

🧰 對應檢查工具

#	主題	Slug	Stage	大綱
33	HTML 檢查工具	`33-html-tooling`	🌱	W3C Validator、HTMLHint、axe-core、Lighthouse、htmllint、Prettier HTML、Rich Results Test

章節進度統計

知識主題：33 項
🌿 growing：3（2 現有 + 1 跨系列）
🌱 seed：29

跨系列連結

→ fundamentals/html-structure（基礎入門）
→ fundamentals/dom、fundamentals/bom（CH4 瀏覽器）
→ seo/（Meta / OG / Structured Data）
→ frontend/a11y/（CH12 深入 a11y）
→ W05 CMS capstone（contenteditable、rich text editor 實戰）