LESSON-08 · TOPIC 04
能組成具有單一 main、可辨識 nav 與完整 header/footer 的頁面 shell。
能組成具有單一 main、可辨識 nav 與完整 header/footer 的頁面 shell。
landmarks 讓鍵盤與輔助技術使用者快速跳到頁首、導覽、主要內容與頁尾；只有視覺 div 無法提供相同結構。
要修改的檔案：files/starter/index.html
定位：在 Elements 依序搜尋 header、nav、main、footer，確認 main 數量為 1。｜依 module-4 定位，只修改「header、nav、main、footer landmarks」的責任。
先結果，再原理；完成後要能說出自己看見的證據。
首頁視覺完成，但所有區塊都是 div，使用 landmark 導覽無法快速前往主要內容。
起始狀態：fixture 已提供完整語意 shell，等待結構 probe 驗證，不依章節文字回顯。
runtime count=4、uniqueCount=4、valid=true；fixture 只有一個 main，nav 具有 aria-label。
驗收證據：runtime count=4、uniqueCount=4、valid=true，text 包含品牌、主要導覽、服務內容與版權資訊
建立每一頁共用 shell、skip link 目的地與輔助技術快速導覽時。
常見混淆：header 不一定永遠是 banner；放在 article 內時語意依 context 不同。main 也不是每個 section 都放一個。
這段程式是理解起點，不是要你直接跳過 Starter。
landmarks 像建築物的明確區域標示，讓人不用從第一個 div 一路摸索到最後。
正式說法：Semantic elements expose landmark roles according to context；main represents the dominant content and should normally be unique, while navigation landmarks need distinguishable accessible names when multiple exist。
<header><nav aria-label="主要導覽">…</nav></header><main id="main-content">…</main><footer>…</footer>每一步都留下可觀察結果；如果沒看到，先看「卡住先查」。
檔案：files/starter/index.html 定位：在 Elements 依序搜尋 header、nav、main、footer，確認 main 數量為 1。
要做：先重新載入 Starter，記錄目前畫面、DOM、Computed、Console 或文件內容。
預期：能指出「在 Elements 依序搜尋 header、nav、main、footer，確認 main 數量為 1。」目前的缺口。
證據：保存 files/starter/index.html 的目前狀態，並指出下一步只會修改哪個檔案責任。
卡住先查：確認開啟的是 files/starter/index.html，且定位到 在 Elements 依序搜尋 header、nav、main、footer，確認 main 數量為 1。。
檔案：files/starter/index.html 定位：在 Elements 依序搜尋 header、nav、main、footer，確認 main 數量為 1。
要做：執行 DOM collection probe，實際選取 header、nav、main、footer 並驗證唯一集合。
預期：runtime count=4、uniqueCount=4、valid=true；fixture 只有一個 main，nav 具有 aria-label。
證據：runtime count=4、uniqueCount=4、valid=true，text 包含品牌、主要導覽、服務內容與版權資訊
卡住先查：在 Elements 依序搜尋 header、nav、main、footer，確認 main 數量為 1。
檔案：files/starter/index.html 定位：在 Elements 依序搜尋 header、nav、main、footer，確認 main 數量為 1。
要做：重新整理頁面，再逐項比對預期結果與 evidence。
預期：runtime count=4、uniqueCount=4、valid=true；fixture 只有一個 main，nav 具有 aria-label。
證據：runtime count=4、uniqueCount=4、valid=true，text 包含品牌、主要導覽、服務內容與版權資訊
卡住先查：在 Elements 依序搜尋 header、nav、main、footer，確認 main 數量為 1。
這個示範只讓你看懂概念，不會替你修改 Starter，也不會自動宣告完成。
勾選只是學習紀錄；真正完成仍要回到 Starter 的實際結果。
先按頁面責任分區，不要用視覺位置猜語意。
header 內放具名稱 nav；主要內容只放一個 main；footer 放頁尾資訊。
完整解答與原因：四個語意元素形成可查找集合，main 唯一且 nav 有 aria-label，輔助技術才能辨識區域與目的。