35. 引用內容標記 (Marking Up Quotes)

By /

HTML 提供元素，用來識別引文及創作作品的參照。

元素或屬性用途
<blockquote>獨立呈現的區塊引文
<q>周圍文字中的簡短引文
<cite>所參照創作作品的標題
cite 屬性識別引文來源的 URL

這些功能描述內容的意思，而不只是控制外觀。

<p>
  導師說：<q>先使用有意義的 HTML。</q>
</p>

使用引用元素標示引文。如果讀者需要知道來源，應提供可見的出處資訊。

35.1 使用 <blockquote> 標示區塊引文

使用 <blockquote> 標示引自其他來源的區段：

<blockquote>
  <p>先使用有意義的 HTML，再加入呈現樣式及行為。</p>
</blockquote>

區塊引文可以包含多個段落及其他適當的流式內容：

<blockquote>
  <p>為每個表單控制元素提供清晰標籤。</p>
  <p>如果有助說明用途，應將相關控制元素分組。</p>
</blockquote>

瀏覽器通常會縮排區塊引文，但縮排只是預設樣式。

不要只為縮排一般內容而使用 <blockquote>：

<!-- 不適當：這是操作指示，不是引文。 -->
<blockquote>
  <p>完成以下練習。</p>
</blockquote>

版面及間距應使用 CSS 控制。

35.2 使用 <q> 標示行內引文

使用 <q> 標示句子或段落中的引文：

<p>
  評閱者形容這個網頁<q>清晰而且容易導覽</q>。
</p>

瀏覽器通常會在 <q> 內容周圍產生引號。

避免手動加入另一對引號：

<!-- 通常會產生重複引號。 -->
<p>評閱者說：<q>「清晰而且容易導覽。」</q></p>

應改為：

<p>評閱者說：<q>清晰而且容易導覽。</q></p>

<q> 不適用於所有使用引號的情況。例如，將某個詞當作詞語討論，或以反諷方式使用某個用語，不一定代表引用其他來源。

35.3 選擇 <blockquote> 或 <q>

應根據引文在文件中的作用選擇：

情況合適元素
句子中的引用詞句<q>
獨立呈現的引文<blockquote>
多個引用段落<blockquote>
需要縮排的一般內容使用適當 HTML 容器，再透過 CSS 設定樣式

沒有固定字數決定應使用哪個元素。

簡短引文如果獨立呈現，仍然可以使用區塊引文。較長詞句如果自然融入段落，也可以保持行內形式。

不要將 <blockquote> 放在 <p> 內，因為段落不能包含它：

<p>指南提供以下建議：</p>

<blockquote>
  <p>發布網頁前，先使用鍵盤測試。</p>
</blockquote>

35.4 cite 屬性

<blockquote> 和 <q> 都可以使用 cite 屬性識別來源 URL：

<blockquote cite="https://example.com/guide">
  <p>發布網頁前，先使用鍵盤測試。</p>
</blockquote>

行內引文：

<p>
  指南建議
  <q cite="https://example.com/guide">使用鍵盤測試</q>。
</p>

這個屬性：

  • 包含 URL，而不是作者姓名。
  • 可以識別來源文件或相關背景資料。
  • 通常不會建立可見連結。
  • 不應是讀者唯一能取得的來源資訊。

以上例子的 URL 及引文只作示範用途。

35.5 可見的出處資訊

將出處資訊放在引文之外：

<blockquote>
  <p>發布網頁前，先使用鍵盤測試。</p>
</blockquote>

<p>— 課程開發團隊，無障礙工作坊筆記</p>

這能將來源資訊與引文本身分開。

具有說明文字的獨立引文，可以使用 <figure> 和 <figcaption>：

<figure>
  <blockquote>
    <p>先使用有意義的 HTML。</p>
  </blockquote>

  <figcaption>
    — 課程開發團隊，<cite>HTML 工作坊筆記</cite>
  </figcaption>
</figure>

figure 不一定包含圖片，也可以將引文及其說明文字組合起來。

35.6 使用 <cite> 標示作品標題

<cite> 元素識別創作作品的標題：

<p>
  這段引文來自 <cite>HTML 工作坊筆記</cite>。
</p>

作品例子包括：

  • 書籍。
  • 文章。
  • 詩作。
  • 電影。
  • 歌曲。
  • 研究論文。
  • 網頁。
  • 其他創作作品。

單獨的人名不是作品標題。

應使用：

<p>
  Alex Morgan 在 <cite>Accessible Interfaces</cite>
  中討論表單設計。
</p>

不要只為將作者姓名設為斜體而使用 <cite>。

元素與屬性具有不同用途：

語法意思
<cite>Accessible Interfaces</cite>作品標題
cite="https://example.com/interfaces"引文的來源 URL

<cite> 元素不會自動建立連結。

35.7 連結至來源

使用一般錨點元素提供可見來源連結：

<figure>
  <blockquote cite="https://example.com/workshop-notes">
    <p>先使用有意義的 HTML。</p>
  </blockquote>

  <figcaption>
    — 課程開發團隊，
    <cite>
      <a href="https://example.com/workshop-notes">HTML 工作坊筆記</a>
    </cite>
  </figcaption>
</figure>

引用真實來源時，應：

  • 準確識別作品。
  • 盡可能連結至相關網頁或區段。
  • 加入章節或頁碼等有用資料。
  • 區分直接引文與轉述。
  • 不要捏造引文，或將言論歸於沒有說過它的人。

轉述可以參照作品，而不使用 <q> 或 <blockquote>：

<p>
  <cite>HTML 工作坊筆記</cite>
  建議先選擇具有語意的元素，再加入視覺樣式。
</p>

35.8 巢狀引文

引文可以包含其他引文：

<p>
  導師說：
  <q>評閱者形容這個例子<q>容易理解</q>。</q>
</p>

瀏覽器通常會透過產生不同引號，區分巢狀層級。

引文內包含另一段獨立引文：

<blockquote>
  <p>工作坊以以下建議作為開場：</p>

  <blockquote>
    <p>先處理內容，而不是裝飾。</p>
  </blockquote>
</blockquote>

只有在反映來源結構時才使用巢狀引文，不要用它建立額外縮排。

35.9 語言與引號

如果引文語言與周圍內容不同，應識別其語言：

<p>
  導師的建議是
  <q lang="en">Organise the content first, then design the layout.</q>
</p>

語言宣告有助具備語言識別能力的工具解讀文字。

瀏覽器可能使用符合語言慣例的引號。CSS 也可以指定 <q> 使用的引號：

q:lang(en) {
  quotes: "“" "”" "‘" "’";
}

q:lang(zh-Hant) {
  quotes: "「" "」" "『" "』";
}

這些宣告定義外層及巢狀引號配對。

不同語言及編輯風格的引號慣例有所不同。應選擇適當慣例，並測試顯示結果。

與 <q> 不同，<blockquote> 通常不會產生引號。

35.10 無障礙功能與呈現方式

具有語意的引用標記有助區分引文與周圍文字，但輔助技術不一定會一致地讀出每個引用邊界。

應透過以下方式保持意思清晰：

  • 引介文字。
  • 準確的引文。
  • 可見的出處資訊。
  • 可閱讀的呈現方式。
  • 有用的來源連結。

不要只透過 cite 屬性提供來源。

區塊引文樣式：

blockquote {
  margin-inline: 0;
  padding-inline-start: 1rem;
  border-inline-start: 4px solid #005ea8;
}

blockquote p {
  margin-block: 0.75rem;
}

figcaption {
  color: #444;
}

padding-inline-start 等邏輯屬性，比固定設定左側間距更能適應不同書寫方向。

不要將出處資訊設為過小或低對比度的文字。來源資訊也是內容的一部分。

35.11 完整範例：引文與出處資訊

以下獨立網頁示範區塊引文、行內引文、巢狀引文及語言變更。

所有引文及作品標題都是虛構的教學例子，並非引自真實出版物。

id: hong-kong-html-quotes
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">
    <meta
      name="description"
      content="示範 HTML 區塊引文、行內引文及作品標題標記。"
    >
    <title>引用內容標記 | HTML 範例</title>
    <style>
      *,
      *::before,
      *::after {
        box-sizing: border-box;
      }

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

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

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

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

      section > h2 {
        margin-block-start: 0;
      }

      .note {
        padding: 1rem;
        border-inline-start: 4px solid #005ea8;
        background: #eaf2f8;
      }

      figure {
        margin: 0;
      }

      blockquote {
        margin-inline: 0;
        padding-inline-start: 1rem;
        border-inline-start: 4px solid #005ea8;
      }

      blockquote p {
        margin-block: 0.75rem;
      }

      figcaption {
        color: #444;
      }

      q:lang(en) {
        quotes: "“" "”" "‘" "’";
      }

      q:lang(zh-Hant) {
        quotes: "「" "」" "『" "』";
      }

      :lang(en) {
        line-height: 1.7;
      }
    </style>
  </head>
  <body>
    <main>
      <h1>引用內容標記</h1>

      <p class="note">
        本頁所有引文及作品標題都是虛構的教學例子。
      </p>

      <section aria-labelledby="block-heading">
        <h2 id="block-heading">區塊引文</h2>

        <figure>
          <blockquote>
            <p>
              先使用有意義的 HTML。
              待內容具有清晰結構後，
              再加入呈現樣式。
            </p>
          </blockquote>

          <figcaption>
            — 虛構課程團隊，
            <cite>HTML 工作坊筆記</cite>
          </figcaption>
        </figure>
      </section>

      <section aria-labelledby="inline-heading">
        <h2 id="inline-heading">行內引文</h2>

        <p>
          虛構導師將目標形容為
          <q>讓內容容易理解</q>。
        </p>
      </section>

      <section aria-labelledby="nested-heading">
        <h2 id="nested-heading">引文中的引文</h2>

        <p>
          虛構導師說：
          <q>評閱者形容這個例子<q>容易理解</q>。</q>
        </p>
      </section>

      <section aria-labelledby="language-heading">
        <h2 id="language-heading">另一種語言的引文</h2>

        <p>
          虛構導師的建議是：
          <q lang="en">Organise the content first, then design the layout.</q>
        </p>

        <p>
          中文意思是：先整理內容，再設計版面。
        </p>
      </section>

      <section aria-labelledby="reference-heading">
        <h2 id="reference-heading">參照作品</h2>

        <p>
          虛構出版物
          <cite>HTML 工作坊筆記</cite>
          討論具有語意的結構。
          這裏將標題標示為作品參照，而不是引文。
        </p>
      </section>
    </main>
  </body>
  </html>

在這個範例中：

  • <blockquote> 識別獨立呈現的引文。
  • <figure> 將引文與出處資訊組合起來。
  • <figcaption> 讓出處資訊保持在引文之外。
  • <cite> 識別虛構作品標題。
  • <q> 識別行內及巢狀引文。
  • 局部 lang 宣告識別英文內容。
  • CSS 定義符合語言慣例的引號。
  • 沒有為虛構作品捏造來源 URL。

35.12 常見錯誤

錯誤較好的做法
只為縮排而使用 <blockquote>使用 CSS 控制呈現方式
將 <blockquote> 放在 <p> 內放在段落之外
在 <q> 內容中手動加入引號讓瀏覽器產生引號
所有加上引號的詞語都使用 <q>只用於真正引文
將作者姓名放在 cite 屬性提供來源 URL
以為 cite 會建立可見來源連結加入一般 <a>
使用 <cite> 標示單獨作者姓名用它標示作品標題
將編輯加入的出處資訊放在引文內放在引文之外
將轉述當成直接引文區分轉述與原文引用
捏造引文或來源資料核實真實來源，或標明例子為虛構
將出處資訊設為過小或低對比度文字保持來源資訊可讀

本章總結： 使用 <blockquote> 標示獨立呈現的引文，使用 <q> 標示文字中的引文。<cite> 用於作品標題，cite 屬性用於來源 URL。應保持出處資訊可見、區分引文與轉述，並使用 CSS，而不是引用元素，建立裝飾性縮排。

相關文章

Scroll to Top