HTML 粗體怎麼寫？strong、b 與 CSS font-weight 差異

要讓 HTML 文字顯示成粗體，可以使用 <strong>、<b>，或用 CSS 的 font-weight。三種方式通常都會呈現較粗的字，但用途並不相同：前兩者帶有 HTML 語意，CSS 則只負責外觀。

HTML 粗體的三種基本寫法

<strong>這是重要內容</strong>
<b>這是需要吸引注意的文字</b>
<span class="text-bold">這是用 CSS 控制的粗體</span>

.text-bold {
  font-weight: 700;
}

原文介紹的三種寫法仍然有效，但現在更應該先判斷「這段文字有沒有語意」，再決定使用哪一種標記，而不是只看瀏覽器是否把它顯示成粗體。

<strong>：表示重要、嚴肅或急迫

依照 HTML Living Standard，<strong> 代表內容具有較強的重要性、嚴肅性或急迫性。適合用在警告、關鍵步驟、不可忽略的條件，或文章中真正重要的句子。

<p><strong>儲存前請先備份資料。</strong> 此操作無法復原。</p>

瀏覽器預設通常會把 <strong> 顯示成粗體，但「重要性」才是選用它的原因。若只想讓文字變粗、內容本身並不重要，就不應為了外觀濫用 <strong>。

<b>：吸引注意，但不增加重要性

<b> 可用來標示需要實用性注意、但沒有額外重要性的文字，例如摘要中的關鍵字、評測中的產品名稱，或互動介面中的操作詞。HTML 標準也提醒：若有更合適的元素，應優先使用標題、<em>、<strong> 或 <mark>。

<p>本篇會比較 <b>HTML</b>、<b>CSS</b> 與網頁語意。</p>

<b> 並不是「舊版 strong」，也不能假設它永遠一定是粗體；網站樣式表仍可改變它的外觀。

CSS font-weight：只控制字體粗細

如果需求只是視覺設計，例如按鈕、導覽列或卡片標題需要較粗，使用 CSS 會更容易集中管理。font-weight 可以套用在任何能顯示文字的元素，不一定要搭配 <span>。

.card-title {
  font-weight: 700;
}

.secondary-label {
  font-weight: 500;
}

CSS Fonts 規範中，normal 等同 400、bold 等同 700，數值範圍可為 1 到 1000。不過實際能呈現哪些粗細，仍取決於所使用的字型；字型沒有對應字重時，瀏覽器會選擇接近的可用字重。

實務上應該怎麼選？

1. 先判斷內容：如果拿掉粗體後，仍需要告訴讀者這是重要資訊，就用 <strong>。
2. 再判斷注意目的：如果只是標示關鍵字、名稱等實用性提示，可考慮 <b>。
3. 最後處理外觀：純視覺粗細交給 CSS，並使用 class 集中管理，不必在每一段加入 inline style。

語意與外觀可以一起使用

HTML 負責說明內容意義，CSS 負責呈現方式。即使使用 <strong>，也可以另外用 CSS 改成不同顏色或字重；反過來，CSS 把文字設成粗體，也不會自動增加內容的重要性。

<strong class="warning">請勿關閉電源</strong>

.warning {
  color: #b42318;
  font-weight: 800;
}

常見錯誤

• 只為了字變大或變粗就使用 <h1> 到 <h6>；標題元素應反映文章結構。
• 把所有粗體都改成 <strong>；這會讓真正重要的資訊失去層次。
• 認為 CSS 一定要搭配 <span>；其實 class 可以直接套在段落、連結、按鈕等元素上。
• 指定字重後沒有檢查字型是否支援，導致 500、600、700 看起來幾乎相同。

常見問題

<strong> 和 <b> 哪一個對 SEO 比較好？

不要為了 SEO 勉強選標籤。先用正確語意組織內容，讓標題、段落與重要資訊自然清楚，通常比大量塞入粗體標籤更有價值。

bold 和 700 有什麼差別？

在 CSS 規範中，bold 等同 700。使用數值的好處是能和 400、500、600、800 等字重建立更細的視覺層級，但前提是字型有提供或支援相對應的字重。

無障礙工具一定會把 <strong> 讀得更重嗎？

不一定。輔助技術與使用者設定的處理方式可能不同，因此不能只靠語氣變化傳達警告；重要內容仍應寫得明確，必要時搭配清楚的標題、圖示或提示文字。

結論

要做 HTML 粗體，先決定內容語意：重要資訊用 <strong>，只需吸引注意時才用 <b>，純視覺字重則交給 CSS font-weight。這樣不只程式碼更容易維護，也能讓文章結構更清楚。

規範參考：WHATWG：strong element、WHATWG：b element、W3C：font-weight property。