Blogger 文章撰寫建議：使用正確 HTML 標記進行排版

早期 Blogger 的編輯模式中，按下 Enter 鍵將會自動添加 <br /> 標記，讓使用者直覺地看到所需要內容排版。在 2020 年平台更新，編輯模式取消了 Enter = 換行，改為使用 <p> 標記文字。當編輯模式中連續按下 Enter 製造空行，切換 HTML 檢視會是 <p><br /><p>，在一行文字中間按下 Enter 時，可能在該處插入 <div> 並於整篇文章末端添加 </div>。

Blogger 快速的文章邊輯方法

平台改變了文章編輯模式，或許可解讀為官方也不建議大量使用 <br /> 區隔段落。然而，已經習慣使用換行標籤，面對 2020 更新就不太適應，尤其是在切換「編輯模式」與「HTML檢視」時，整篇內容緊縮在一起，變得難以辨識原先樣式。

編輯模式輸入文字自動添加<p>，HTML模式若無標記會變成文字黏在一起。

多數用戶都維持原來的編輯方法，在「HTML檢視」中手動添加 <br />（Shift+Enter），筆者也是如此撰寫文章，而且維持了許多年。即便是新手用戶也可能透過相關文章或討論，瞭解換行標籤是調整段落的捷徑方法。

在「HTML檢視」中添加 <br /> 可快速調整段落或排版。

瞭解與使用正確的 HTML 標籤

最近，筆者出於無聊加上好奇，向 Perplexity AI 詢問了關於 <p> 與 <br /> 的差異，才知道正確的文章 HTML 結構應該採用區塊標籤來處理段落，雖然使用 <br /> 更簡單快速，卻不是正規的 HTML 格式。

Perplexity AI 回應 <p> 與 <br /> 的差異，前者預設會有邊距。

一、使用 <p> 標示文字，即使只有一行也要添加標籤。

在 HTML 語法中，<p> 是用來定義一個段落，可明確告知瀏覽器和搜尋引擎「這是一個文字段落」，有助於內容的結構化。段落標題則採用 <h1>、<h2>...等標題標籤。

段落之間的排版問題（間隔距離），應該用 CSS 的「margin」屬性來調整。只需在網站主題中添加 CSS 即可統一設置邊距，若有特定位置需要加大或縮小邊距，也能在 <p> 標籤中添加「style」屬性，例如：

提醒一點，當上、下（兩個）標籤相鄰時，中間的邊距將會重疊並取較大值，例如：

二、用 <figure> 與 <figcaption> 包裝圖片。

當文章內容是「文+圖」時，建議採用 <figure> 和 <figcaption> 標籤。前者是一個獨立區塊，可用來包裝圖片、影片、圖表等內容，後者是專屬說明文字。其優點為：

• 語義明確：搜尋引擎能準確理解圖片和說明文字的關聯。
• 結構清晰：對於輔助工具（螢幕閱讀器）更為友善。
• 排版靈活：文字說明可以放在圖片的上方或下方。

結語：

在 Blogger 編輯文章時，使用 <br /> 標記來調整內容段落並非不可以，而且較為簡單直覺。然而，大量使用換行標籤不是 HTML 正規格式。應該利用不同標記，如 <p>、<div> 和 <figure> 來標示文字段落與圖片。

只是一般的撰文者不一定熟悉 HTML 標記，因此 Blogger 文章存在換行（<br />）標籤已成為常態，加上 Google 搜尋引擎也能正常檢索內容，無論是最終的文章樣式或搜尋排名，在本質上沒有太大問題。若能以正規 HTML 格式來編輯文章，卻可以在＂沒有太大問題＂的基礎上加分。

文章更新：本文最初於 2011 年發布，現在內容為 2025 年 9 月重新撰寫。