HTML 引用完全指南：正确使用 blockquote、q 和 cite 标签

在 HTML 中标记引用内容时，经常会看到错误的标签用法。本文将深入探讨不同场景下应该使用哪些 HTML 标签来正确处理引用。

HTML 提供了三个主要的引用相关元素：

• <blockquote> - 块级引用
• <q> - 行内引用
• <cite> - 引用来源

Blockquotes

<blockquote> 标签用于将引用的文本与周围内容区分开来。虽然传统写作中常将四行以上的引用设为独立段落，但 HTML 规范并没有这样的硬性规定。只要文本是引用内容，并且你希望将其与周围内容分开显示，<blockquote> 就是语义化的正确选择。

浏览器默认会为 <blockquote> 添加左右边距以实现缩进效果。

作为流式元素（块级元素），<blockquote> 内部可以包含其他元素，例如段落：

<blockquote>
  <p>第一段引用内容...</p>
  <p>第二段引用内容...</p>
</blockquote>

也可以包含标题或列表等其他元素：

<blockquote>
  <h2>引用标题</h2>
  <ul>
    <li>列表项一</li>
    <li>列表项二</li>
  </ul>
</blockquote>

需要注意的是，<blockquote> 应该仅用于实际的引用内容，而不是作为设计中的装饰元素。这也有助于提升可访问性，因为屏幕阅读器用户可以在引用之间跳转。如果只是为了视觉效果，应该使用带有 class 的 <div>。

行内引用 Q 标签

<q> 标签用于行内引用，即较短的引用内容。现代浏览器通常会自动添加引号作为伪元素，但对于旧浏览器可能需要备用方案。

传统的引号标记对于行内引用同样有效。使用 <q> 标签的好处包括支持 cite 属性、自动处理引号以及支持嵌套引用层级。

<q> 标签不应该用于讽刺语气（例如：你真的会使用 <q> 标签来讽刺，不是吗？）或表示所谓的"手势引号"。

Citation 属性

<q> 和 <blockquote> 都可以使用 cite 属性来提供引用内容的来源 URL。规范特别指出 URL 周围可以包含空格。

<p>警官留下了一张纸条说 <q cite="https://example.com/summons">你已被传唤于 1 月 4 日出庭...</q></p>

这个 cite 属性默认对用户不可见，但可以通过 CSS 来显示。

Citation 元素

<cite> 标签应该用于引用创作作品（如书籍、文章、音乐等），而不是引用说话的人。例如：

<p>我最喜欢的书是 <cite>The Reality Dysfunction</cite>，作者是 Peter F. Hamilton。</p>

浏览器默认会将 <cite> 标签内容显示为斜体。

重要的一点是，<cite> 不应该放在 <blockquote> 或 <q> 标签内部，因为这会使其成为引用内容的一部分，而规范禁止这样做。

使用 Figure 元素

一种语义正确的引用标记方式是将 <blockquote> 放在 <figure> 元素内，然后将 <cite> 元素和其他作者信息放在 <figcaption> 中：

<figure class="quote">
  <blockquote>
    但 Web 浏览器不像 Web 服务器...
  </blockquote>
  <figcaption>
    — Jeremy Keith, <cite>Mental models</cite>
  </figcaption>
</figure>

这种方式的好处包括：

• 所有四个元素的语义都是正确的
• 可以包含和封装除作品名称之外的作者信息
• 便于样式设计，无需使用额外的 div 或 span

不适用于对话

<blockquote>、<q> 和 <cite> 都不应该用于标记对话或类似的说话者之间的交流。对于对话，规范建议使用 <p> 标签配合标点符号，以及 <span> 或 <b> 标签来标记说话者，<i> 标签来标记舞台指导。

引用的可访问性

根据研究，屏幕阅读器应该能够正确理解语义化的 <q>、<blockquote> 和 <cite> 标签，不会出现问题。

更多引用技巧

使用 CSS 添加引号

可以使用 CSS 伪元素为 <blockquote> 添加引号：

blockquote {
  quotes: "\"" "\"" "'" "'";
}

为了确保显示智能引号（弯引号），最好使用 quotes CSS 属性。

多级引用

<q> 标签会自动调整引用层级。如果你在使用英式惯例（单引号），可以通过 CSS 设置：

q {
  quotes: "'" "'" "\"" "\"";
}

嵌套引用没有层级限制，甚至可以嵌套在 <blockquote> 内的 <blockquote> 中。

悬挂标点

排版专家通常建议将引号悬挂在文本外侧，使文字垂直对齐。可以使用负的 text-indent 或 hanging-punctuation CSS 属性来实现：

/* 回退方案 */
blockquote {
  text-indent: -0.45em;
}

/* 如果浏览器支持，使用 hanging-punctuation */
@supports (hanging-punctuation: first) {
  blockquote {
    text-indent: 0;
    hanging-punctuation: first;
  }
}

动画引号

当然，我们也可以为引号添加动画效果，因为 <q> 标签中的引号是作为伪元素添加的，可以被选择和样式化。

原文链接: Quoting in HTML: Quotations, Citations, and Blockquotes

作者: John Rhea

发布日期: December 10, 2019