初學者指南：HTML blockquote 和 q 標籤

更新日期： 2024 年 10 月 15 日

在撰寫 HTML 時，我們經常需要在網頁中引用其他人的話語或段落。

在 HTML 中 blockquote 和 q 標籤專門用來表示引用內容。

這兩個標籤雖然都有「引用」的意思，但它們有不同的使用場景和用途。

在這篇文章中，我們將介紹 blockquote 和 q 標籤的用法，以及在何種情況下應該使用它們。

什麼是 blockquote 標籤？

blockquote 是用於引用較長段落的內容。

通常，blockquote 用來標示出從外部來源引入的一段話，這段話比較長，可能是幾句話或整段文字。

大多數瀏覽器會自動將 blockquote 標籤中的內容縮進，以視覺上區分出這部分是引用內容。

此外，blockquote 標籤還可以使用 cite 屬性來標示引用的來源網址。

例子

<blockquote cite="https://www.example.com">
  網頁設計之父 Tim Berners-Lee 曾說過：「這是一個設計用來連接人類知識的網絡。」
</blockquote>

在這個例子中，blockquote 被用來引用 Tim Berners-Lee 的話，並將其與其他內容區分開來。

同時，我們使用了 cite 屬性來標明引用的來源網址，讓讀者了解這段話的來源。

瀏覽器會自動調整它的樣式，例如增加縮進，以明確標示出這段內容是引用的。

什麼是 q 標籤？

q 標籤用於引用較短的文字，例如一句話或一句簡短的引述。

q 標籤中的內容通常會被加上引號，這是瀏覽器預設的行為。

例子

<p>老師常說：<q>學習編程就像學習一種新語言，需要不斷練習。</q></p>

在這個例子中，我們用 q 標籤來引用老師說的一句話，這種短引用通常會顯示為帶有引號的內容。

blockquote 和 q 的區別

引用長度

• blockquote 用於引用較長的段落或段落組合。適合用於書籍摘錄、演講片段或其他較長的引用文字。
• q 用於較短的引用，通常只是一句話或幾個字。

預設樣式

• blockquote：瀏覽器會為 blockquote 中的內容添加縮進，以便讀者能清楚區分它與普通段落的不同。
• q：瀏覽器通常會自動為 q 標籤中的內容加上引號。

使用建議

使用語義化標籤

當我們使用 HTML 時，使用具有語義化的標籤是非常重要的，因為這樣可以幫助搜索引擎和輔助技術理解網頁內容。

當引用其他來源的內容時，應該使用 blockquote 或 q，而不是隨便使用 <p> 或其他標籤來代替。

適當引用來源

當使用 blockquote 或 q 標籤時，最好提供引用的來源，這樣可以提高內容的可信度。

你可以使用 cite 標籤或 blockquote 的 cite 屬性來標示引用的來源。

例子

<blockquote cite="https://www.example.com">
  「我們的最大弱點在於放棄。成功的必然之路就是不斷地再試一次。」
  <cite>—— 愛迪生</cite>
</blockquote>

在這個例子中，我們用 blockquote 標籤引用了一段話，並用 cite 標籤來標明引用的來源，同時使用 cite 屬性來標示這段話的來源網址，這樣可以讓讀者更好地了解引用的背景。

常見錯誤

用 <p> 標籤代替引用標籤

許多初學者會使用 p 標籤來代替 blockquote 或 q 進行引用，這樣會讓 HTML 缺少語義化，並且無法充分表達這些文字是引用而來的。

這不僅對搜索引擎不友好，也會影響網站的可訪問性。

忽略引用的來源

在引用內容時，不標明來源可能會導致版權問題，並且讓讀者無法確認內容的真實性。

因此，提供引用來源是非常重要的，可以提高你網站內容的可靠性。

結論

blockquote 和 q 標籤是 HTML 中用來表示引用內容的兩個有用工具。

blockquote 適合用於較長的引用，而 q 則適合用於簡短的引用。

使用這些標籤可以幫助我們更好地表達內容的語義，並且提高網頁的可讀性和可訪問性。

希望這篇文章幫助你了解如何正確使用 blockquote 和 q 標籤，讓你的網頁更加標準和易於理解。

如果有任何問題，或者想要進一步了解其他 HTML 標籤的使用，隨時告訴我！