HOWTO · HTML
在 HTML 中建立粗體文字
本教程介紹如何在 HTML 中建立粗體文字。
本頁內容
若要在 HTML 中建立粗體文字，文字具有重要性時請使用 <strong>；若要突顯內容但不加強其重要性，請使用 <b>；若要控制文字的視覺粗細，則使用 CSS font-weight。這些選擇對意義和外觀的影響不同，請依內容選用合適的方法。 (strong)
使用 標示具有語意重要性的文字
當文字在上下文中具有高度重要性、急迫性或嚴肅性時，請使用 <strong>。瀏覽器通常預設會以粗體顯示這個元素，但它所傳達的意義不受這種樣式影響。
<p><strong>Save your changes before closing the page.</strong></p>
即使樣式表改變了文字外觀，這個句子仍會被標示為重要內容。此處整句指示都很重要，因此使用 <strong> 包住整句。
執行此範例：
const message = "Save your changes";
console.log(`<strong>${message}</strong>`);
這個 JavaScript 範例會將 HTML 片段以文字形式輸出，不會在瀏覽器頁面中呈現。此處未執行這個範例。
使用 突顯文字
使用 <b> 可突顯文字，但不表示它具有更高的重要性。例如，它可用來標示讀者應留意的關鍵詞或標籤。<b> 是有效的 HTML 元素；當這種提示比 <strong> 所表達的較強烈語意更符合需求時，就可以使用它。
<p>Search results for <b>CSS selectors</b></p>
若文字本身具有重要性，例如警告內容，請改用 <strong>。兩者的外觀可能相似，但語意用途不同。
使用 CSS font-weight 控制視覺粗細
若目標是調整視覺樣式，請設定 CSS font-weight 屬性。只需套用一次時，使用行內樣式很方便；若要重複使用並從樣式表調整，則可建立類別。
<p style="font-weight: bold;">This text is bold.</p>
<style>
.bold-text {
font-weight: bold;
}
</style>
<p class="bold-text">This text uses a reusable class.</p>
normal 表示使用一般粗細；bold 表示使用粗體。bolder 和 lighter 則表示相對於父元素增加或降低粗細。實際呈現的粗細取決於字型提供的字重，因此並非每種字型都能以這些值呈現出明顯不同的粗細。
結合語意 HTML 與 CSS 樣式
使用語意標記傳達意義，並使用 CSS 控制外觀。若重要文字還需要特定的視覺粗細，請用 <strong> 包住文字，再為該元素或其類別設定樣式。
<style>
.important {
font-weight: 700;
color: darkred;
}
</style>
<p>Before submitting, read the <strong class="important">confirmation message</strong>.</p>
此處的 <strong> 表示訊息具有重要性；類別則控制文字的粗細與顏色。如果文字只需要視覺樣式而沒有特殊重要性，可以套用 CSS 類別，不必加入語意強調。
粗體文字與無障礙
將文字加粗純粹是一種視覺效果：螢幕閱讀器不會播報 <b> 元素，也不會播報 CSS font-weight 的變化。如果粗體文字對理解內容至關重要——例如警告、關鍵術語或必填欄位——請使用 <strong> 加以標記，讓輔助技術能夠傳達其重要性，並且切勿只依靠粗體來承載含義。