HTML Deep：HTML 不只是畫面骨架，而是 Browser 的文件資料模型

Learning outcomes

• 能解釋 HTML source 與 DOM tree 的差別。
• 能判斷 semantic element 與 generic div 的取捨。
• 能追蹤 form field 從 label/name 到提交資料。
• 能用 Elements/Accessibility tree 檢查 document structure。

1. Parse 後才有 DOM

<main>
  <h1>Courses</h1>
  <section>
    <h2>JavaScript</h2>
  </section>
</main>

Browser 讀取 source，建立 node tree；JavaScript 操作的是 DOM objects，而不是直接修改硬碟上的 HTML 檔。

2. Semantic Structure 是可機器理解的資訊

<nav aria-label="Primary">...</nav>
<main>...</main>
<button type="button">Save</button>
<a href="/courses">Courses</a>

Button 是 action，anchor 是 navigation。外觀可以相同，interaction/accessibility contract 卻不同。

3. Form Data Contract

<label for="score">Score</label>
<input
  id="score"
  name="score"
  type="number"
  min="0"
  max="100"
>

id 主要建立 element identity/label relation；name 才是 form data key。Browser validation 是 UX，不等於 server trust。

4. DOM Order 也會影響閱讀與鍵盤流程

不要只靠 CSS order/position 把視覺順序改得和 DOM 邏輯完全不同。Screen reader、tab navigation、copy/paste 等行為都可能依 document order。

5. Progressive Enhancement

能用原生 link/form/button 完成的核心功能，通常先讓 HTML 本身成立，再用 CSS/JS 強化體驗。這能降低 script failure 時整個功能完全消失的風險。

Project checkpoint：Course Workspace Shell

header
nav
main
  course list
  course detail
  edit form
footer

Rules:
  meaningful headings
  native controls
  labels
  logical DOM order

下一課只處理 CSS resolution，不改 document meaning。

Debug evidence

1. Elements tree 是否和預期一致？
2. label 是否真的對到 input？
3. button/link role 是否正確？
4. tab order 是否合理？