為什麼學這些？

• 建立「頁面骨架」：讓內容有清楚區塊
• 可近性更友善：螢幕報讀器可直接跳到主要區塊
• 對 SEO 友善：搜尋引擎能理解頁面結構與主題
• 後續加 CSS/JS 時更好維護

先釐清三件事

• 語意化元素（semantic）：header, nav, main, section, article, aside, footer
  → 告訴瀏覽器「這塊是什麼」
• 非語意元素：div（區塊）、span（行內）
  → 純容器，等之後用 class 配合樣式/JS
• 區塊 vs 行內（概念即可）
  • 區塊元素：預設獨占一行（如 section, article, div, h1, p）
  • 行內元素：不換行（如 a, span, strong, em）

每個元素怎麼用（一句話版）

• <header>：區塊的開頭（可放標題、導覽、Logo）。頁面或文章裡都能有自己的 header。
• <nav>：導覽連結群組（主選單、麵包屑、頁內目錄）。
• <main>：頁面主要內容（每頁只會有一個）。
• <section>：主題區塊（應有標題，如 h2）。
• <article>：可獨立閱讀/分享的內容單位（文章、貼文、卡片）。
• <aside>：補充資訊或側欄（與主內容相關性較弱）。
• <footer>：區塊的結尾（作者資訊、版權、延伸連結）。
• <div>：無語意容器，用於分組/佈局/掛 class。
• <span>：行內無語意容器，用於小範圍包住文字。

小提醒：header/footer 可以出現在頁面或某一個 article/section 裡；不是全站限定一個。

section vs article（怎麼選）

• 用 article：這塊內容 單獨拿出去也看得懂，可獨立被引用（如一篇貼文、一則新聞、一張產品卡）。
• 用 section：只是把主題分段、分章節（如「功能介紹」「常見問題」），不是獨立內容。
• 不確定就先用 div，等確定語意再換。

div / span 什麼時候用？

• 需要一個容器來套 CSS 或掛 JS 事件，但找不到合適語意元素 → div
• 只想在同一行包住幾個字加樣式或加連結 → span

<div class="card">
  <h3 class="card__title">課程更新</h3>
  <p>下一章將介紹 <span class="keyword">表格</span> 與 `<caption>` 使用。</p>
</div>

ID 與錨點（配合導覽/目錄）

• 在 section/article 上加 id，導覽列可以用 <a href="#features"> 跳到該區塊。
• HackMD 內建 [TOC] 會讀取 H1–H3 自動生成目錄（你前幾天已在用）。

常見錯誤

• 在同一頁放了多個 <main>
  → 只保留主要內容那一個，其它區塊用 section/div。
• 只有為了「變好看」就亂用 section/article
  → 語意優先，外觀之後交給 CSS。
• section/article 裡沒有標題
  → 每個主題區塊應該要有自己的 h2/h3。
• 全站只有一個 header/footer 的迷思
  → 文章內也可以有自己的 header 與 footer。
• 把導覽零散放一堆連結
  → 用 nav 包起來，形成一個導覽區塊。

VS Code 快速產生（Emmet）

• header>h1+nav>ul>li*4>a
• main>section#intro>h2+p+section#features>h2+ul>li*3
  （注意：一行中重複 section 需分開寫或拆成兩段擴展）
• section#latest>h2+article*2>header>h3+p^p+footer>a

DAY5心得

• 有語意的骨架，比用一堆 div 好維護
• article 是可獨立的內容單位；section 是章節分組
• 之後加 CSS/JS 時，這個骨架會很好用