語意標籤（Semantic HTML）
為什麼要用語意標籤？
比喻：語意標籤就像幫房間貼上門牌 🏷️
<div>就像一個沒標籤的箱子——你不知道裡面裝什麼。<nav>就像標了「導覽列」的箱子——一目了然。
好處：
- 無障礙：螢幕閱讀器能理解頁面結構
- SEO：搜尋引擎更懂你的內容
- 可維護：程式碼更容易閱讀
語意標籤 vs div
<!-- ❌ 壞：全部用 div，看不出結構 -->
<div class="header">
<div class="nav">...</div>
</div>
<div class="main">
<div class="article">...</div>
<div class="sidebar">...</div>
</div>
<div class="footer">...</div>
<!-- ✅ 好：用語意標籤，結構清楚 -->
<header>
<nav>...</nav>
</header>
<main>
<article>...</article>
<aside>...</aside>
</main>
<footer>...</footer>
頁面結構標籤
<body>
<header> <!-- ← 頁首：Logo、導覽列 -->
<nav> <!-- ← 導覽列 -->
<ul>
<li><a href="/">首頁</a></li>
<li><a href="/about">關於</a></li>
</ul>
</nav>
</header>
<main> <!-- ← 主要內容（一頁只有一個） -->
<article> <!-- ← 獨立內容（文章、貼文） -->
<header>
<h1>文章標題</h1>
<time datetime="2024-01-15">2024/01/15</time>
</header>
<section> <!-- ← 區段（主題段落） -->
<h2>第一段</h2>
<p>...</p>
</section>
<section>
<h2>第二段</h2>
<p>...</p>
</section>
<footer>
<p>作者：小明</p>
</footer>
</article>
<aside> <!-- ← 側邊欄（相關但非主要的內容） -->
<h3>相關文章</h3>
<ul>
<li><a href="#">另一篇文章</a></li>
</ul>
</aside>
</main>
<footer> <!-- ← 頁尾：版權、聯絡資訊 -->
<p>© 2024 DevLearn</p>
</footer>
</body>
各標籤的用途
| 標籤 | 用途 | 範例 |
|---|---|---|
<header> |
頁首或區段的頭部 | Logo、導覽 |
<nav> |
導覽連結區 | 主選單、麵包屑 |
<main> |
頁面主要內容（唯一） | 文章、產品列表 |
<article> |
獨立可分享的內容 | 部落格文章、新聞 |
<section> |
主題相關的區段 | 章節、功能區塊 |
<aside> |
附帶內容 | 側邊欄、廣告 |
<footer> |
頁尾或區段的尾部 | 版權、聯絡方式 |
<figure> |
圖表 + 標題 | 圖片、程式碼區塊 |
<time> |
時間 | 發布日期 |
<mark> |
標記文字 | 搜尋結果高亮 |
<details> |
可展開的內容 | FAQ |
<summary> |
details 的標題 | 點擊展開 |
details 和 summary
<!-- 原生可展開/收合（不需要 JS！） -->
<details>
<summary>點擊查看答案</summary>
<p>答案是 42。</p>
</details>
<details open> <!-- ← open 屬性 = 預設展開 -->
<summary>常見問題</summary>
<p>Q: 如何註冊？</p>
<p>A: 點擊右上角的註冊按鈕。</p>
</details>