單元 1：HTML／DOM——畫面的語意骨架

課程首頁：Learning/ai first frontend foundations

設計者通常先看到版面：這裡是一張大圖、那裡是一排卡片，右上角有一顆按鈕。瀏覽器、搜尋引擎、螢幕閱讀器與鍵盤使用者看到的則不只是外觀，而是「這段內容是什麼、和其他內容有什麼關係、能不能操作」。HTML 的工作，就是把這些關係寫進頁面。

如果把網站比喻成一棟建築，CSS 比較像材質、顏色與空間配置，HTML 則是牆、門、樓梯與房間用途。你可以把一扇門畫得很漂亮，但若它實際上只是貼在牆上的圖片，使用者仍然走不過去。同樣地，一個看起來像按鈕的 div，不會自動擁有按鈕的鍵盤操作、焦點行為與可及名稱。

本單元完成條件

完成後，你應該能夠：

1. 看著一張介面圖，說出主要 landmark、標題層級、清單、連結、按鈕與表單。
2. 解釋 HTML 原始碼與 browser 中 DOM 的差別。
3. 判斷一個可點擊元素應該是 link 還是 button。
4. 不看滑鼠，只用鍵盤走完頁面的主要操作。
5. 要求 Agent 在不改變視覺的前提下改善語意，並自行驗收。

HTML 不是排版指令，而是內容的身分

HTML 元素的名稱在回答：「這個東西在文件中扮演什麼角色？」

• h1 到 h6 表示標題與內容層級。
• p 表示一段文字。
• ul、ol 與 li 表示一組具有清單關係的項目。
• a 表示前往另一個位置或資源。
• button 表示在目前情境觸發一項操作。
• form、label、input 表示使用者要提供資料。
• header、nav、main、aside、footer 表示頁面的主要區域。

這些元素仍然可以用 CSS 做出任何視覺風格。使用正確語意不是犧牲設計，而是讓設計除了「被看見」，也能被理解、操作與維護。

從畫面反推結構的四個問題

拿到設計稿時，不要立刻問要用幾個 div。先問以下四題。

1. 這個頁面的主要目的與主內容是什麼？

一個頁面通常只有一個主要內容區域。全站導覽、側欄與頁尾不是主內容。把主內容辨認出來，能協助鍵盤與輔助科技使用者快速跳到真正想讀的地方，也讓 Agent 不會把所有區塊視為同一層。

2. 使用者閱讀時，標題順序是否說得通？

標題不是字體尺寸。h1 應說明本頁主題，h2 是主要章節，h3 是某個章節下的子題。即使 CSS 把 h3 做得比 h2 大，也不會改變它們的文件關係。

最簡單的驗證方法，是只列出標題文字並隱藏其他內容。如果這份大綱仍能說明頁面，就代表結構大致合理。不要為了視覺大小跳過層級，也不要把每個區塊都設成 h1。

3. 重複項目是否真的形成一組？

導覽選項、搜尋結果、步驟、功能卡片與商品列表，常常具有「這些東西是一組」的關係。使用清單結構能讓系統知道項目數量與邊界。畫面上排成三欄只是一種視覺呈現；內容上是不是清單，才是 HTML 的判斷。

4. 可點擊之後是「前往」還是「執行」？

• 前往另一頁、下載資源或跳到同頁段落，通常使用 link。
• 開啟選單、送出表單、切換顯示狀態或刪除項目，通常使用 button。

一個很好用的白話測試是：能自然說「前往哪裡」的，多半是 link；能自然說「執行什麼」的，多半是 button。外觀不決定身分，同一種視覺元件也可能依行為分別使用 link 或 button。

DOM：瀏覽器此刻理解的頁面

HTML 檔案是輸入材料，DOM 是瀏覽器解析後建立的樹狀物件模型。JavaScript 可以在執行期間新增、刪除或修改節點，所以你在 DevTools Elements 面板看到的 DOM，不一定和伺服器最初送來的 HTML 完全相同。

可以把 DOM 想成一份持續更新的組織圖：

document
└── html
    ├── head
    └── body
        ├── header
        │   └── nav
        └── main
            ├── h1
            └── section
                ├── h2
                └── ul
                    ├── li
                    └── li

樹狀關係很重要，因為 CSS 選擇器、JavaScript 查找、事件傳遞與輔助科技理解，都會受到父子與兄弟節點影響。Agent 把一個元素移出原本的 form 或 list，視覺可能暫時沒變，行為與語意卻可能已經斷掉。

Attribute 是元素的必要補充

Attribute 為元素補充資訊或行為。例如 link 的 href 說明目的地，image 的 alt 提供替代文字，input 的 type 影響輸入方式，button 的 disabled 表示目前不能操作。

不是 attribute 越多越專業。原生 HTML 已能表達的語意，通常先用正確元素；只有原生語意不足時才補充 ARIA。錯誤的 ARIA 可能比沒有 ARIA 更令人困惑，因為它會向輔助科技宣告一個與實際行為不一致的角色。

表單的重點不是輸入框，而是完整對話

表單是一段人與系統的對話。使用者需要知道：要填什麼、格式為何、是否必填、送出後發生什麼，以及錯誤要怎麼修正。

一個完整欄位通常包括：

• 可辨識且與 input 正確關聯的 label。
• 必要時提供的格式或用途說明。
• 清楚的必填狀態，而不是只靠紅色星號。
• 錯誤發生後，指出問題與修正方法的文字。
• 送出中的狀態，避免重複操作且不讓使用者以為頁面當機。
• 成功後的明確結果或下一步。

Placeholder 不能取代 label。使用者開始輸入後 placeholder 會消失，而且通常對比低、難以回看。錯誤也不能只靠紅框，因為顏色不一定能被所有人辨識，紅框本身也沒有說明如何修正。

可及性其實是結構品質的壓力測試

可及性不只是為少數人額外加上的功能。它會迫使產品把名稱、順序、狀態與回饋說清楚，而這些也是自動化測試、搜尋、Agent 理解與長期維護需要的資訊。

可及名稱

只有圖示的按鈕仍需要一個可被讀出的名稱。「垃圾桶圖示」在視覺上可能表示刪除，但系統需要知道是刪除哪一項。可及名稱應描述操作，例如「刪除〈文章名稱〉」，而不是描述圖案外觀。

鍵盤操作與焦點

互動元素應能用 Tab 到達，並以 Enter 或 Space 等預期方式操作。焦點樣式要清楚可見，否則鍵盤使用者不知道自己在哪裡。不要只測「Tab 有沒有動」，還要測順序是否符合閱讀與操作邏輯，以及選單、對話框關閉後焦點回到哪裡。

圖片替代文字

alt 要傳達圖片在當下情境中的功能。純裝飾圖片可以使用空的替代文字，避免製造噪音；承載內容的圖片則應說明使用者若看不到會錯過什麼。不要把檔名或「圖片」兩字當成說明。

用 DevTools 驗證，不只看原始碼

在 Elements 面板選取元素時，先檢查四件事：

1. 元素名稱是否符合用途。
2. 它在 DOM 中的父層是否合理。
3. 實際可及名稱從哪裡來。
4. disabled、expanded、selected、invalid 等狀態是否和畫面一致。

然後把滑鼠放到一邊，只用鍵盤重新走一次主要流程。這個測試往往比閱讀一大段 Agent 產生的 HTML 更快發現結構問題。

與 Agent 協作：先要求結構說明，再要求修改

不要只說「幫我改善 SEO 或無障礙」。這種範圍太大，Agent 容易大量加入不必要屬性。可以改成：

請先不要修改視覺樣式。檢查這個頁面的 landmark、標題層級、清單、link/button 選擇、表單 label、圖片替代文字與鍵盤焦點順序。

先提供：
1. 目前 DOM 結構摘要；
2. 每個問題對使用者造成的具體影響；
3. 最小修改方案與預計影響的檔案。

實作後請用 Elements、鍵盤操作與既有測試提供證據。不要用 ARIA 重複原生 HTML 已有的語意，也不要改變既有視覺，除非焦點提示本來不可見。

操作練習：替一個現有頁面做語意稽核

選擇一個內容不複雜的頁面，依序完成：

1. 寫下頁面唯一主要目的。
2. 列出所有標題，檢查不看內容時是否仍有合理大綱。
3. 圈出所有可點擊元素，分成「前往」與「執行」。
4. 找出所有表單欄位，確認名稱、說明、錯誤與送出狀態。
5. 用 Tab 走完主要流程，記錄焦點遺失、順序奇怪或無法操作的位置。
6. 讓 Agent 只修一到三個最明確的問題。
7. 比較 diff，確認沒有為了修語意重寫整個 component。
8. 重新用 Elements 與鍵盤驗收。

你的產出不是一份「HTML 有幾個錯」的清單，而是一份能說明使用者影響、修正邊界與驗證結果的稽核紀錄。

常見誤判

• 「看起來像按鈕，所以它就是按鈕」：視覺不會自動帶來原生行為。
• 「全部用 div 最自由」：短期看似自由，長期要自行補回大量語意與操作規則。
• 「加上 role 就完成」：宣告角色不會自動建立正確鍵盤行為與狀態管理。
• 「標題字很小，所以用 h5」：標題層級描述結構，不描述字級。
• 「有 alt 就合格」：替代文字仍可能空泛、重複或與情境無關。
• 「滑鼠可以點，所以可操作」：鍵盤、觸控、螢幕閱讀器與放大使用情境仍可能失敗。

Teach-back 題目

1. 為什麼 HTML 原始碼與 DevTools 中的 DOM 可能不同？
2. 一個「看更多」元件在什麼情況下應是 link，什麼情況下應是 button？
3. 為什麼 placeholder 不能取代 label？
4. 如果 Agent 把所有可點擊的 div 加上 role="button"，還缺少哪些行為與驗證？
5. 不改變畫面美感，語意結構仍能改善哪些產品品質？

能用自己的網站回答這五題，就進入 CSS。你會開始把「我覺得這個間距和比例不對」翻成可重複、可驗證的視覺規則。

上一課：Learning/ai first frontend foundations/00 request to pixel

下一課：Learning/ai first frontend foundations/02 css visual system