4. 段落 (Paragraph)

By /

HTML 段落將相關文字組成容易閱讀的單位。當內容構成一個段落，例如簡介、解說或描述時，應使用 <p> 元素。

<p>HTML 描述網頁內容的結構和意義。</p>

段落用來組織文字，不是用來容納所有類型的內容，也不是用來製造空白間距。

4.1 基本段落結構

段落通常由開始標籤、文字及結束標籤組成：

<p>這是一個段落。</p>

要寫兩個段落，便使用兩個 <p> 元素：

<p>我們的學習中心提供網頁開發入門課程。</p>
<p>你不需要具備程式設計經驗。</p>

瀏覽器通常會將每個段落呈現為獨立區塊，並在前後加入一些間距。CSS 可以改變這些外觀設定。

4.2 原始碼中的換行與空白

在一般 CSS 空白處理規則下，HTML 原始碼中的換行及連續空格，不會完全按輸入方式顯示。

<p>
  Welcome     to our
  learning centre.
</p>

這通常會顯示為：

Welcome to our learning centre.

將 HTML 原始碼分成多行，有助於閱讀程式碼，但不會建立多個段落。

讓文字自然換行

不要在原始碼每行的結尾加入 <br>：

<!-- 普通文章應避免不必要的強制換行。 -->
<p>
  本課程介紹 HTML。<br>
  你將學習建立網頁結構。<br>
  課程包含實習練習。
</p>

改為：

<p>
  本課程介紹 HTML。你將學習建立網頁結構。課程包含實習練習。
</p>

瀏覽器會根據可用寬度、字型及文字設定，自動安排換行。

4.3 段落與換行

<p> 和 <br> 的用途不同：

元素用途
<p>表示一個段落
<br>在文字內插入換行

當換行本身是內容的一部分，例如詩句，便可以使用 <br>：

<p>
  維港燈影映晚風，<br>
  波光點點入夜中。
</p>

<br> 是空元素，沒有結束標籤。

不要使用重複的 <br> 製造段落之間的空隙。應使用獨立段落，並以 CSS 設定間距。

4.4 段落內可以包含甚麼？

段落可以包含文字及措辭內容（phrasing content），當中包括許多行內元素：

<p>
  先建立<strong>清晰的結構</strong>，
  再加入<em>合適的樣式</em>。
</p>

常見例子如下：

元素用途
<a>連結
<strong>強烈的重要性
<em>語氣強調
<span>通用行內容器
<code>電腦程式碼
<abbr>縮寫
<br>換行

例如：

<p>
  將文件儲存為 <code>index.html</code>。
  開始前，請閱讀<a href="course-guide.html">課程指南</a>。
</p>

在適合文字內容的情況下，段落也可以包含圖片。

不要在 <p> 內放入結構性容器

段落不能包含以下元素：

  • 另一個 <p>。
  • <h2> 等標題。
  • <div> 或 <section>。
  • <ul> 或 <ol>。
  • <table>。

錯誤：

<p>
  課程主題：
  <ul>
    <li>標題</li>
    <li>段落</li>
  </ul>
</p>

正確：

<p>課程主題：</p>
<ul>
  <li>標題</li>
  <li>段落</li>
</ul>

這些規則由 HTML 內容類別決定，不是由元素的 CSS display 值決定。

4.5 結束段落標籤

HTML 在某些情況下允許省略 </p> 結束標籤。

例如，瀏覽器可以識別以下標記開始了另一個段落：

<p>第一個段落。
<p>第二個段落。

不過，明確結束每個段落，對初學者而言更清晰，也有助於避免意外的結構：

<p>第一個段落。</p>
<p>第二個段落。</p>

瀏覽器可能會修正無效標記

考慮以下例子：

<p>簡介 <div>額外資訊</div></p>

按 HTML 剖析規則，<div> 會令前面的段落在 <div> 開始前結束。最後的 </p> 也可能產生一個額外的空段落。

最終的文件物件模型（DOM）可能與原始碼所顯示的巢狀結構不同。 不要依賴瀏覽器的錯誤修復來組織內容。

4.6 段落的語言設定

段落會繼承包含它的元素所設定的語言。

一般英文

<html lang="en">

香港英文

<html lang="en-HK">

香港繁體中文

<html lang="zh-Hant-HK">

為文件選擇一個主要語言。

如果段落使用不同語言，便在該段落設定 lang。例如，在主要語言為英文的文件中：

<p>Welcome to our Hong Kong learning centre.</p>
<p lang="zh-Hant-HK">歡迎來到我們的香港學習中心。</p>

如果只有英文段落中的一個詞組使用中文：

<p>
  The Chinese course title is
  <span lang="zh-Hant-HK">網頁製作入門</span>.
</p>

語言屬性有助於發音及語言處理，但不會翻譯文字，也不會改變字元編碼。

4.7 顯示特殊字元

部分字元在 HTML 原始碼中有特殊意義。

當你想將它們顯示為文字時，可以使用字元參照：

<p>段落元素寫作 <p>。</p>
<p>本課程涵蓋 HTML & CSS。</p>

顯示結果如下：

段落元素寫作 <p>。

本課程涵蓋 HTML & CSS。

常見字元參照：

字元參照顯示內容
&lt;<
&gt;>
&amp;&
&nbsp;不換行空格

不換行空格會防止文字在該位置換行。不要使用重複的 &nbsp; 來縮排段落或建立版面。

一般英文及中文文字，可以直接寫在 UTF-8 文件中。

4.8 使用 CSS 設定段落外觀

使用 CSS 控制段落間距及閱讀體驗：

<p class="intro">
  學習建立結構清晰的網頁。
</p>
p {
  margin-block: 0 1rem;
  line-height: 1.8;
}

.intro {
  font-size: 1.125rem;
  color: #333;
}

實用的屬性包括：

屬性用途
margin-block段落前後的外邊距
line-height行與行之間的間距
font-size文字大小
text-align文字對齊方式
max-width限制文字容器的寬度

避免過時的對齊屬性

不要使用：

<p align="center">歡迎</p>

應改用 CSS：

<p class="centred">歡迎</p>
.centred {
  text-align: center;
}

對一般正文而言，靠起始方向對齊，通常比將長段落置中更容易閱讀。

4.9 段落與預先格式化文字

如果需要保留空格及換行，<pre> 可能更合適：

<pre><code>index.html
styles/
  main.css
images/
  harbour.jpg</code></pre>

<pre> 表示預先格式化文字，<code> 則標示內容為電腦程式碼。

它適合程式碼或純文字示意圖等內容，不應只為了避免建立適當段落而使用。

CSS 也可以改變空白處理方式，但這只會改變呈現方式，不會改變元素的語意。

4.10 完整範例：課程簡介

以下中文版網頁示範獨立段落、行內強調、連結、英文段落，以及短詩中有意義的換行。

主要語言設定為香港繁體中文，不需要 JavaScript。

id: hong-kong-html-paragraphs
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">
    <title>段落 | 香港學習中心</title>
    <style>
      * {
        box-sizing: border-box;
      }

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

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

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

      h1 {
        margin-block: 0 1rem;
      }

      h2 {
        margin-block: 0 1rem;
      }

      p {
        margin-block: 0 1rem;
      }

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

      section > :last-child {
        margin-block-end: 0;
      }

      .intro {
        font-size: 1.125rem;
      }

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

      a {
        color: #005ea8;
        text-underline-offset: 0.2em;
      }

      code {
        font-family: ui-monospace, monospace;
      }

      :focus-visible {
        outline: 3px solid #005ea8;
        outline-offset: 4px;
      }
    </style>
  </head>
  <body>
    <main>
      <h1>撰寫清晰的段落</h1>

      <p class="intro">
        結構良好的網頁會將文字分成有意義、
        容易閱讀的段落。
      </p>

      <p class="welcome" lang="en-HK">
        Clear paragraphs help readers understand the content
        and read comfortably on different screen sizes.
      </p>

      <section>
        <h2>關於課程</h2>

        <p>
          我們的入門課程涵蓋<strong>HTML 結構</strong>，
          以及無障礙網頁內容的基礎知識。
        </p>

        <p>
          你將練習撰寫標題、段落及清單。
          調整外觀前，先從<em>有意義的內容</em>開始。
        </p>

        <p>
          將你的第一個網頁儲存為 <code>index.html</code>，
          然後便可以在網頁瀏覽器中開啟。
        </p>

        <p>
          準備好後，請繼續進行<a href="#practice">練習活動</a>。
        </p>
      </section>

      <section>
        <h2>有意義的換行</h2>

        <p>
          以下教學示例詩句使用換行，
          作為內容結構的一部分：
        </p>

        <p>
          維港燈影映晚風，<br>
          波光點點入夜中。
        </p>
      </section>

      <section>
        <h2 id="practice">練習活動</h2>

        <p>
          撰寫兩個段落，介紹一個你喜歡遊覽的香港地方。
        </p>

        <p>
          每個段落集中表達一個主要意思。
          讓瀏覽器自然安排普通文章的換行。
        </p>
      </section>
    </main>
  </body>
  </html>

在這個範例中：

  • 每個 <p> 表示一個獨立段落。
  • <strong> 和 <em> 為文字加入重要性及語氣強調。
  • <code> 標示檔案名稱。
  • 英文段落有自己的語言設定。
  • <br> 分隔詩句，而不是普通段落。
  • CSS 控制間距，不需要空白段落。

4.11 常見錯誤

錯誤較好的做法
將所有文字放在同一段落按意思分成不同段落
使用 <br><br> 分隔段落使用獨立的 <p> 元素
加入空白 <p> 製造間距使用 CSS 外邊距或內邊距
在 <p> 內放入標題、清單或章節將這些元素放在段落之外
假設原始碼換行會直接顯示在畫面上了解一般空白處理規則
使用重複的 &nbsp; 建立版面使用 CSS
使用過時的 align 屬性使用 text-align
用段落充當視覺標題使用合適的標題元素
依賴瀏覽器修正無效的巢狀結構撰寫有效而明確的結構

本章總結： 使用 <p> 組織相關的文章文字。將結構性元素放在段落之外，讓普通文字自然換行，並使用 CSS 設定間距。只有在換行具有內容意義時才使用 <br>，而真正需要保留格式的內容則使用 <pre>。

相關文章

Scroll to Top