5. 文字格式 (Text Formatting)

By /

HTML 提供不同元素，用來標示文字中的語氣強調、重要性、重點、編輯修改及其他意義。

瀏覽器通常會為這些元素提供預設外觀，例如粗體或斜體。不過，元素的意義比預設樣式更重要。

使用 HTML 描述內容，並以 CSS 控制外觀。

5.1 常見的文字格式元素

元素意義常見預設外觀
<strong>強烈的重要性、嚴重性或緊急性粗體
<em>語氣強調斜體
<b>引起注意，但不增加重要性粗體
<i>不同的語態、語氣或文字類型斜體
<mark>標示與目前語境相關的內容帶有背景色
<small>補充註解，例如法律聲明較小文字
<s>不再準確或適用的內容刪除線
<del>從文件中刪除的內容刪除線
<ins>加入文件的內容底線
<sub>下標位置較低的文字
<sup>上標位置較高的文字

預設外觀可能有所不同，也可以透過 CSS 改變。不要只依賴外觀傳達重要資訊。

5.2 強烈的重要性：<strong>

當文字具有強烈的重要性、嚴重性或緊急性時，使用 <strong>：

<p>
  <strong>重要：</strong>
  請在截止日期前提交申請。
</p>

另一個例子：

<p>
  <strong>不要與他人分享你的密碼。</strong>
</p>

不要只因為想要粗體文字，就使用 <strong>。如果目的純粹是視覺效果，應使用 CSS。

此外，<strong> 不會將文字變成標題。標題應使用 <h1> 至 <h6>。

5.3 語氣強調：<em>

當強調某個字詞會改變句子的理解方式時，使用 <em>：

<p>關閉編輯器前，你<em>必須</em>先儲存檔案。</p>

強調的位置可以改變句子的重點：

<p><em>我</em>完成了這個練習。</p>
<p>我完成了<em>這個練習</em>。</p>

第一句強調是誰完成，第二句強調完成了甚麼。

<em> 不是通用的斜體樣式元素。

5.4 <b> 和 <i> 並未過時

這兩個元素仍然是有效的 HTML，但各自具有特定意義。

<b>：引起注意

使用 <b> 引起注意，但不表示額外的重要性或不同語態，例如摘要中的關鍵字：

<p>
  本課介紹的關鍵字包括：
  <b>元素</b>、<b>標籤</b>及<b>屬性</b>。
</p>

當沒有更具體而合適的語意元素時，才考慮使用它。

<i>：不同語態或文字類型

使用 <i> 標示與一般文章有所區別的文字，例如生物分類名稱或其他語言的詞組：

<p>
  家貓的學名是 <i>Felis catus</i>。
</p>

其他語言的詞組也應標示語言：

<p>
  法文詞組 <i lang="fr">bon voyage</i>
  的意思是「旅途愉快」。
</p>

不是所有外語詞組都需要斜體。一般的 <span lang="…"> 可能更合適。

主要分別

目的合適的選擇
表示強烈的重要性<strong>
表示語氣強調<em>
引起注意，但不增加重要性<b>
表示不同語態或文字類型<i>
只改變外觀CSS

5.5 標示相關內容：<mark>

<mark> 標示因為與目前語境相關而需要突顯的文字。

例如，搜尋結果可以標示符合搜尋條件的詞語：

<p>
  搜尋結果：
  學習如何撰寫無障礙的 <mark>HTML</mark> 文件。
</p>

它也可以標示引文中正在討論的部分。

不要只為了替任意文字加上背景色而使用 <mark>。純粹裝飾性的樣式應使用 CSS。

5.6 補充註解：<small>

<small> 表示補充註解，包括版權聲明、法律註解及免責聲明：

<p>
  <small>本頁是示範網頁，並非報名服務。</small>
</p>

它不代表「可以難以閱讀的次要文字」。

補充註解仍應保持清晰，具備足夠的對比及合適的文字大小。

不要只為了縮小字體，就將整篇文章放在 <small> 內。

5.7 底線與刪除線

<u>：非文字形式的註記

<u> 表示帶有未以文字明說的非文字註記，例如標示拼字錯誤：

<p>
  拼字練習：<u class="spelling-error">recieve</u>
  應寫成「receive」。
</p>

它不是用來表示重要文字的通用元素。

由於有底線的文字可能看起來像連結，應小心使用。如果只是視覺上的底線，應使用 CSS。

<s>：不再準確或適用

<p>
  原有費用：<s>HK$500</s>。
  現時費用：HK$450。
</p>

<s> 表示過時內容，不是記錄文件編輯時的刪除操作。

<del> 和 <ins>：文件修改

<p>
  工作坊開始時間為
  <del>10:00</del>
  <ins>10:30</ins>。
</p>

這些元素分別標示移除及加入的內容。

可選的 datetime 屬性可以記錄修改日期：

<p>
  地點：
  <del datetime="2026-10-14">A 室</del>
  <ins datetime="2026-10-14">B 室</ins>。
</p>

這個屬性不會自動顯示修改日期。如果讀者需要知道日期，應提供可見的說明文字。

5.8 下標與上標

<sub>：下標

當符號慣例需要降低文字位置時，使用 <sub>：

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

<sup>：上標

使用 <sup> 表示適合的上標形式，例如英文序數的字尾：

<p lang="en-HK">
  The meeting is on the 21<sup>st</sup> of October.
</p>

一般基線文字，例如「21st」，也可以接受。

不要只為了將裝飾文字向上或向下移動，就使用 <sub> 或 <sup>。視覺定位應使用 CSS。

複雜的數學式應考慮使用合適的數學標記，而不是完全依靠這兩個元素組合。

5.9 程式碼與相關文字

HTML 為技術內容提供專用元素：

元素意義
<code>電腦程式碼或與程式碼相關的片段
<kbd>使用者輸入，通常是鍵盤輸入
<samp>程式的示例輸出
<var>變數

例如：

<p>將網頁儲存為 <code>index.html</code>。</p>
<p>按 <kbd>Ctrl</kbd> + <kbd>S</kbd> 儲存。</p>
<p>程式顯示 <samp>File saved successfully.</samp></p>
<p>變數 <var>itemCount</var> 儲存項目數量。</p>

這些元素不會自動保留原始碼中的空白。

對多行程式碼範例，應結合 <pre> 和 <code>：

<pre><code><p>你好，香港！</p></code></pre>

將 HTML 原始碼顯示為文字時，應使用字元參照處理 < 等特殊字元。

5.10 語言與文字格式

除非另行指定 lang，否則文字格式元素會繼承周圍的語言設定。

香港英文網頁可以使用：

<html lang="en-HK">

中文內容可以有自己的語言設定：

<p>
  <strong lang="zh-Hant-HK">請先儲存文件。</strong>
  Save your document before continuing.
</p>

主要使用繁體中文的網頁可以使用：

<html lang="zh-Hant-HK">

英文技術詞語可以局部標示語言：

<p>
  本課介紹
  <span lang="en">HyperText Markup Language</span>。
</p>

不需要區分地區的一般英文，可以使用 lang="en"。

語言與文字格式是不同的決定。 將詞組標示為另一種語言，不會自動賦予它語氣強調或重要性。

5.11 不增加語意的樣式設定

如果視覺效果沒有更具體的語意用途，可以使用帶有 CSS 類別的 <span>：

<p>
  歡迎來到<span class="brand-name">海港學習中心</span>。
</p>
.brand-name {
  color: #005ea8;
  font-weight: 700;
}

<span> 將文字組合起來以便設定樣式，但不增加重要性。

避免使用 <font> 和 <big> 等過時的呈現元素。應使用以下 CSS 屬性：

  • color
  • font-size
  • font-weight
  • font-style
  • text-decoration

5.12 完整範例：具有意義的文字格式

以下中文版網頁以香港課程通知示範不同的文字層級元素。

範例提供清晰的文字說明，讓意義不只依賴粗體、背景色或刪除線。

id: hong-kong-html-text-formatting
name: 文字格式 — 香港課程通知
type: html
content: |-
  <!doctype html>
  <html lang="zh-Hant-HK">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>文字格式 | 香港學習中心</title>
    <style>
      * {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        color: #222;
        background: #f5f7fa;
        font-family: system-ui, sans-serif;
        line-height: 1.8;
      }

      main {
        max-width: 46rem;
        margin-inline: auto;
        padding: 2rem 1rem;
      }

      h1,
      h2 {
        color: #005ea8;
        line-height: 1.4;
      }

      h1 {
        margin-block: 0 1rem;
      }

      h2 {
        margin-block: 0 1rem;
      }

      p {
        margin-block: 0 1rem;
      }

      section {
        margin-block: 1.5rem;
        padding: 1.25rem;
        border: 1px solid #767676;
        border-radius: 0.5rem;
        background: white;
      }

      section > :last-child {
        margin-block-end: 0;
      }

      mark {
        color: #222;
        background: #ffe58a;
        padding-inline: 0.15em;
      }

      small {
        font-size: 0.9375rem;
      }

      code,
      kbd,
      samp {
        font-family: ui-monospace, monospace;
      }

      code,
      kbd {
        padding: 0.1em 0.3em;
        border-radius: 0.2rem;
        background: #edf1f5;
      }

      ins {
        text-decoration: underline;
        text-decoration-thickness: 0.12em;
      }

      .notice {
        padding: 1rem;
        border-inline-start: 4px solid #005ea8;
        background: #eaf2f8;
      }
    </style>
  </head>
  <body>
    <main>
      <h1>課程通知</h1>
      <p>
        本頁示範如何使用文字格式表達內容意義。
      </p>

      <section>
        <h2>開始之前</h2>
        <p>
          <strong>重要：</strong>
          關閉編輯器前，請先儲存你的工作。
        </p>
        <p>
          調整外觀之前，你應先<em>理解內容結構</em>。
        </p>
        <p class="notice">
          <strong>請注意：</strong>
          本頁只提供教學示例，並非實際報名服務。
        </p>
      </section>

      <section>
        <h2>課堂關鍵字</h2>
        <p>
          主要關鍵字包括<b>元素</b>、
          <b>標籤</b>及<b>屬性</b>。
        </p>
        <p>
          搜尋示例：「<mark>HTML</mark> 入門」
          中符合搜尋條件的詞語已加上標示。
        </p>
      </section>

      <section>
        <h2>更新的工作坊資料</h2>
        <p>
          原有示範費用：<s>HK$500</s>。
          現時示範費用：HK$450。
        </p>
        <p>
          時間更正：
          原定開始時間為
          <del datetime="2026-10-14">10:00</del>；
          修訂後的開始時間為
          <ins datetime="2026-10-14">10:30</ins>。
        </p>
      </section>

      <section>
        <h2>技術操作指引</h2>
        <p>
          將文件儲存為 <code>index.html</code>。
        </p>
        <p>
          常見的儲存快捷鍵是：
          Windows 的 <kbd>Ctrl</kbd> + <kbd>S</kbd>，
          或 macOS 的 <kbd>Command</kbd> + <kbd>S</kbd>。
        </p>
        <p>
          程式輸出示例：
          <samp lang="en">File saved successfully.</samp>
        </p>
      </section>

      <p>
        <small>
          本頁所有費用及工作坊資料，
          均為虛構的教學示例。
        </small>
      </p>
    </main>
  </body>
  </html>

在這個範例中：

  • <strong> 標示重要指示。
  • <em> 加入語氣強調。
  • <b> 引起讀者對關鍵字的注意。
  • <mark> 標示符合搜尋條件的文字。
  • <s> 標示過時費用。
  • <del> 和 <ins> 描述時間更正。
  • <code>、<kbd> 和 <samp> 標示技術文字。
  • <small> 標示免責聲明，同時保持可讀性。

輔助技術不一定會讀出每一種格式差異。因此，重要警告及修改也應透過文字本身清楚表達。

5.13 常見錯誤

錯誤較好的做法
為每段粗體文字使用 <strong>只用它表示重要性；視覺粗體使用 CSS
為所有斜體文字使用 <em>按內容意義選擇元素
以為 <b> 和 <i> 已過時了解它們有效的語意用途
用文字格式元素代替標題使用 <h1> 至 <h6>
加上底線後令文字看似連結避免混淆，或使用明顯不同的註記樣式
使用 <s> 記錄文件修改使用 <del> 和 <ins>
使用 <small> 令必要資訊變得極小保持所有必要資訊清晰可讀
使用 <mark> 作任意裝飾沒有語境相關性時，使用 CSS
假設輔助技術一定會讀出格式差異用清晰文字表達重要意義
使用 <font> 或 <big>使用 CSS

本章總結： 按意義選擇文字格式元素，而不只是按外觀。分清重要性、語氣強調、引起注意、相關內容標示及文件修改，再以 CSS 建立清晰易讀的呈現方式。

相關文章

Scroll to Top