Skip to content

建立 2026-09-15 更新 2026-09-15

標題與段落

HTML 最常處理的就是文字。瀏覽器預設會把 h1 顯示得很大、p 前後留空白，那只是預設樣式。你選標籤的理由應該是「這是這一頁的主題」或「這是一段完整的話」，而不是「我想要粗體大字」。

標題層級

h1 到 h6 表示大綱層級，不是六種裝飾字級。

<h1>HTML5 入門</h1>
<h2>文件骨架</h2>
<p>每一頁都從 DOCTYPE 開始。</p>
<h2>文字內容</h2>
<h3>標題層級</h3>
<p>不要跳級。</p>

原則：

  • 一頁通常一個 h1，對應這份文件的主題。
  • 接著用 h2 當大節、h3 當小節。不要從 h1 直接跳到 h4。
  • 不要為了「看起來比較小」而選 h3；大小用 CSS 調。

螢幕閱讀器使用者常靠標題清單跳著讀。層級亂跳，等於目錄缺頁。

段落與換行

<p> 包的是一個段落。在原始碼裡按 Enter 不會在頁面上換行，連續空白也會被收成一個空格。

真的要在段落內換行，才用 <br>。通訊錄、詩句、地址這種「短行」比較需要；一般文章請讓 CSS 負責行寬，不要每行插一個 br。

<p>
  唯客學院<br>
  台灣
</p>

<hr> 表示主題轉換時的分隔，不是「畫一條線」的裝飾。若只是想要視覺間隔，用 CSS 的 margin。

重要性與強調

印刷品用粗體、斜體；HTML 用意義：

元素 意義 預設外觀
strong 重要性、嚴重性 粗體
em 語氣強調（重音落在這個詞） 斜體
b、i 僅外觀上的粗／斜，語意很弱 粗體／斜體

該讓輔助科技「加重語氣」或「這很重要」時，用 strong／em。書名、專有名詞若只是排版慣例，才考慮 i。不要用 b 冒充小標題，小標題用 h2／h3。

<p>送出前請<strong>確認信箱沒有打錯</strong>。</p>
<p>我是說<em>現在</em>就要存檔，不是等一下。</p>

其他常用文字元素

  • blockquote：獨立引用整段話。
  • q：行內短引句。
  • code：短程式碼；多行用 pre 包 code。
  • time：日期時間，可加 datetime 給機器讀。
  • mark：與目前情境相關的醒目提示（例如搜尋結果命中）。

第一次用冷門標籤時，到 MDN 元素參考 看一眼定義，避免用錯。

推薦影音

文字元素與語意

簡述：Dave Gray 示範標題層級、段落、em／strong、縮寫與 address，並對照 W3C Validator。與本頁表格可一起看。

繁中常用標籤

簡述：用 VS Code 實際輸入 h1–h6、p、br、hr 與註解，適合對照本頁「段落與換行」。

下一頁：清單與連結。