特殊文字標籤超白話教學

換行、分隔線、刪除線...10個超實用標籤!

什麼是特殊文字標籤?

這些標籤可以讓文字產生「特殊效果」,像:

  • 換行 (不用按很多次 Enter)
  • 畫一條分隔線
  • 刪除線 (劃掉錯誤的內容)
  • 上標/下標 (數學公式、化學式)

接下來一個一個教你!

1. <br> - 換行

是什麼: 強制換行,像按 Enter 鍵。

怎麼用:

<p> 第一行<br> 第二行<br> 第三行 </p>

第一行
第二行
第三行

小提醒: <br> 不需要結束標籤,寫 <br /> 也可以!

2. <hr> - 分隔線

是什麼: 畫一條橫線,用來分隔段落。

怎麼用:

<p>第一段內容</p> <hr> <p>第二段內容</p>

第一段內容

第二段內容

小提醒: hr = horizontal rule (水平線)

3. <strong> - 粗體 (重要)

是什麼: 讓文字變粗,表示「很重要」。

怎麼用:

<p>請注意:<strong>明天要考試!</strong></p>

請注意:明天要考試!

小提醒: <strong> 有「語意」(表示重要),<b> 只是單純變粗。建議用 <strong>!

4. <em> - 斜體 (強調)

是什麼: 讓文字變斜,表示「強調」。

怎麼用:

<p>這件事<em>非常</em>重要!</p>

這件事非常重要!

小提醒: em = emphasis (強調)

5. <del> - 刪除線

是什麼: 在文字中間畫一條線,表示「已刪除」或「錯誤」。

怎麼用:

<p>原價 <del>500元</del> 特價 300元!</p>

原價 500元 特價 300元!

我的名字是 小明 小華。

6. <ins> - 底線 (新增)

是什麼: 在文字下面加底線,表示「新增的內容」。

怎麼用:

<p>會議時間改為 <ins>下午3點</ins></p>

會議時間改為 下午3點

7. <sub> - 下標

是什麼: 讓文字變小、往下移,用在化學式、數學公式。

怎麼用:

<p>水的化學式: H<sub>2</sub>O</p>

水的化學式: H2O

二氧化碳: CO2

8. <sup> - 上標

是什麼: 讓文字變小、往上移,用在次方、註解。

怎麼用:

<p>2的3次方: 2<sup>3</sup> = 8</p>

2的3次方: 23 = 8

圓的面積: πr2

註解[1]

9. <small> - 小字

是什麼: 讓文字變小,用在附註、版權聲明。

怎麼用:

<p> 特價優惠! <small>(限時3天,售完為止)</small> </p>

特價優惠! (限時3天,售完為止)

© 2025 我的網站 版權所有

10. <wbr> - 建議換行點

是什麼: 告訴瀏覽器「如果這行太長,可以在這裡斷行」。

怎麼用:

<p>網址: https://www.<wbr>example.<wbr>com/<wbr>very-<wbr>long-<wbr>url</p>

網址: https://www.example.com/very-long-url-path

試著縮小視窗,網址會在 <wbr> 的地方斷行

小提醒: wbr = word break (單字斷行)

完整範例:做一個促銷廣告!

<div style="border: 2px solid #f59e0b; padding: 20px; border-radius: 10px;"> <h2><strong>限時特賣!</strong></h2> <p>原價 <del>999元</del></p> <p>特價 <ins>只要 599元!</ins></p> <hr> <p> <em>現在下單</em>再送好禮!<br> <small>(限量100組,售完為止)</small> </p> <p>註<sup>[1]</sup>: 優惠至12月31日</p> </div>

限時特賣!

原價 999元

特價 只要 599元!

現在下單再送好禮!
(限量100組,售完為止)

註[1]: 優惠至12月31日

快速小抄

  • <br> - 換行
  • <hr> - 分隔線
  • <strong> - 粗體 (重要)
  • <em> - 斜體 (強調)
  • <del> - 刪除線
  • <ins> - 底線 (新增)
  • <sub> - 下標 (H2O)
  • <sup> - 上標 (23)
  • <small> - 小字
  • <wbr> - 建議換行點

記憶口訣

br 換行 / hr 橫線
strong 粗體 / em 斜體
del 刪除 / ins 插入
sub 下標 / sup 上標
small 小字 / wbr 斷行

常見混淆比較

標籤 效果 用途
<strong> 粗體 重要內容
<b> 粗體 單純粗體 (無語意)
<em> 斜體 強調
<i> 斜體 單純斜體 (無語意)
建議: 優先使用有語意的標籤 (<strong> 和 <em>),對 SEO 和無障礙更好!