HTML Document Structure：先描述內容角色，再談外觀

Learning outcomes

• 能說明 HTML source → DOM 的關係。
• 能建立正確 document skeleton。
• 能依內容角色選 heading、paragraph、list、link、image。
• 能辨識 link path / alt / heading hierarchy 常見問題。

1. Browser 先 Parse Document

<!doctype html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1">
  <title>Course Profile</title>
</head>
<body>
  ...
</body>
</html>

2. Heading 是文件階層，不是字體大小

<h1>JavaScript Course</h1>
<h2>Overview</h2>
<p>Learn runtime and data flow.</p>
<h2>Modules</h2>

想把字變大應交給 CSS；HTML heading 應先表達內容層級。

3. Link：navigation 的語意

<a href="lessons/36-js-values-variables.html">
  Start JavaScript
</a>

<a
  href="https://developer.mozilla.org/"
  target="_blank"
  rel="noreferrer"
>
  MDN
</a>

href 是 destination。相對路徑依目前 document URL 解讀，不是依你腦中認為的專案根目錄。

4. Image：內容與替代資訊

<img
  src="course-map.png"
  alt="JavaScript course learning path diagram"
>

有資訊價值的圖應有能傳達同等目的的 alt；純裝飾圖則要依 accessibility 語意處理，而不是所有圖都塞檔名。

5. List：一組平行項目就用 list

<ul>
  <li>Values and Types</li>
  <li>Functions</li>
  <li>DOM and Events</li>
</ul>

Project checkpoint：Course Profile v1

<main>
  <h1>JavaScript Course</h1>
  <p>Learn how JS executes.</p>

  <h2>Learning goals</h2>
  <ul>...</ul>

  <h2>Start here</h2>
  <a href="lesson-1.html">
    Lesson 1
  </a>
</main>

這一版故意完全不美化。先確定 document meaning 正確，下一課才加入 user input。

Debug evidence：畫面少一張圖 / link 404

1. Elements 裡元素有沒有存在？
2. src/href 最終解析成哪個 URL？
3. Network status 是 200 還是 404？
4. 問題是 HTML structure 還是 asset path？