-正確使用 h1 ~ h6 建立內容層級（每頁僅一個 h1）
-用 <p> 表示段落，不用 <br> 堆疊空行
-了解 <br>（換行）、<hr>（主題分隔）正確時機
-認識幾個常見內文語意標籤：<strong>/<em>, <mark>, <abbr>, <time>, <q>/<blockquote>, <address>
h1 是整頁主標題，h2 是主要章節，h3 是子章節…不要只為了變大字而亂用標題。<p>：自然產生上下間距；不要用多個 <br> 或空白 <p> 來「排版」。<br> 是同段內換行；<hr> 是主題/段落的語意分隔。<strong>（語意強調）比 <b>（粗體外觀）更有意義；同理 <em> 比 <i> 更好。直接貼到 VS Code 測試，觀察大綱與閱讀感受。
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8" />
<title>Day 2 - 標題與段落</title>
</head>
<body>
<h1>我的學習筆記：HTML 基礎</h1>
<p>今天要練習如何用正確的標題與段落建立清楚的內容層級，讓文章更容易讀、也更容易被搜尋引擎理解。</p>
<h2>為什麼需要層級？</h2>
<p>良好的層級能讓讀者快速掃描，也能協助輔助工具（如螢幕報讀器）理解內容。</p>
<h3>常見誤用</h3>
<p>僅為了變大字而使用 <code>h1</code>；用多個 <code><br></code> 塞空白；或是直接跳級（例如 <code>h1</code> 後接 <code>h4</code>）。</p>
<hr />
<h2>正確做法</h2>
<p>每頁有一個 <code>h1</code>（主標題），章節用 <code>h2</code>，子章節用 <code>h3</code>，依序遞進。</p>
<h3>同段內換行</h3>
<p>需要同段換行時才使用 <code><br></code>，例如地址：</p>
<p>
100 台北市中正區重慶南路一段 122 號<br>
3 樓 教室 A
</p>
</body>
</html>
h1 → ✅ 全頁主題用一個 h1，其他用 h2/h3...
h1 → ✅ 用 CSS 控制字級（之後在 CSS 章節做）<br> 製作空白 → ✅ 用 <p> 分段，未來用 CSS 控制間距h1 後接 h4） → ✅ 依序遞進（h1 → h2 → h3）<p> 當作「 spacer 」→ ✅ 避免空元素；需要分隔用 <hr>（語意型）或交給 CSS<b>/<i> → ✅ 改用 <strong>/<em> 提供語意在開始寫 CSS 前，你應能只用標題就說出文章架構。
不佳的做法（跳級、沒有層次）：
<h1>HTML 入門</h1>
<h4>什麼是 HTML</h4>
<h2>標題用法</h2>
<h5>結論</h5>
較佳的做法（有層次）：
<h1>HTML 入門</h1>
<h2>什麼是 HTML</h2>
<h2>標題用法</h2>
<h3>單頁只用一個 h1</h3>
<h3>依序遞進 h2 → h3</h3>
<h2>結論</h2>
h1+p*2 → Tab<h1></h1>
<p></p>
<p></p>
Settings → Auto Close Tags
Format on Save 幫你維持一致縮排<strong>/<em> 比 <b>/<i> 更語意化，以後 CSS 再決定樣式<a>, <img>, alt 撰寫、相對/絕對路徑）
iThome鐵人賽
看影片追技術
看更多