HTML 5中的內聯報價和可訪問性

Question

建議用什么方式在HTML文本中引用其他人？ 特別是如果我想確保屏幕閱讀器能夠正確處理它？

• 我應該使用雙引號是這樣的： "
• 我應該寫" 看起來像這樣：“？
• 我應該使用顯然無法在此處演示的<q></q>對嗎？
• 還有嗎

http://html5doctor.com/blockquote-q-cite/對<q>工作原理有很多解釋，但我沒有看到建議。

Answer 1

對於短內聯引號，請使用<q></q>標記。 大多數瀏覽器都會在引號周圍插入引號，但是，如果您使用的是CSS重置，則可能需要執行以下操作：

q:before, q:after {
    content: """
}

對於任何更長的報價，我建議將<blockquote></blockquote>標記與<cite></cite>標記結合使用，如下所示：

<blockquote>
    This text is from another source
    <cite>
        <a href="http://source-url.com">Source Title</a>
    </cite>
</blockquote>

根據HTML5規范：

blockquote元素表示從另一個來源引用的內容，可以選擇帶有必須在頁腳或cite元素內的引用，還可以帶有內聯更改（例如，注釋和縮寫）。

來源： https : //w3c.github.io/html/grouping-content.html#the-blockquote-element

避免將內聯引號與<q></q>標記結合使用，但是可以將它們與<blockquote></blockquote>標記一起使用。 無論哪種情況，建議在外部來源的引用和頁面的原始內容之間進行某種圖形上的區分（例如，斜體或不同的背景顏色）。

Answer 2

TL; DR：使用q用於在線報價，無痕跡， blockquote用於長片段（帶引號的時候，它不是內唯一的內容blockquote ）

您有兩種選擇：

• <q>元素 ，引號

該元素不能包含引號標點

引用元素內容的引號標點符號（例如引號）不能緊接在q元素之前，之后或內部。 它們將由用戶代理插入渲染中。

但是您可以使用CSS覆蓋默認值。 例如：

:lang(en) q:before {
  content: "“";
}
:lang(en) q:after {
  content: "”";
}

:lang(fr) q:before {
  content: "«";
}
:lang(fr) q:after {
  content: "»";
}

如您所見， 每種語言可能會有所不同

例：

<p>Shakespeare said <q>To be or not to be</q> was a question
     but never said what the answer was.</p>

• <blokquote>元素 ，用於摘要

該元素可以包括引號：

引號可用於在引用的文本和塊引用內的注釋之間划定輪廓。

小心<cite>元素，該元素旨在參考創意作品或其作者的名字。 它不包含報價。 例

<blockquote>
 <p>My favorite quote of Shakespeare is "To be or not to be ?"</p>
  <footer>
    — <cite class="title">The Tragedy of Hamlet, Prince of Denmark</cite>
    by <cite class="author">William Shakespeare</cite>
  </footer>
</blockquote>