標題和段落

標題和段落

大多數結構化文字都由標題和段落組成，無論你是在閱讀故事、報紙、大學教科書還是雜誌等。

結構化內容使閱讀體驗更容易、更愉快。

在 HTML 中，每個段落都必須用 <p> 元素包裹，如下所示：

<p>I am a paragraph, oh yes I am.</p>

每個標題都必須用標題元素包裹。

<h1>I am the title of the story.</h1>

共有六個標題元素：h1、h2、h3、h4、h5 和 h6。每個元素代表文件中不同的內容級別；<h1> 代表主標題，<h2> 代表副標題，<h3> 代表次級副標題，依此類推。

實現結構層次

例如，在這個故事中，<h1> 元素代表故事的標題，<h2> 元素代表每個章節的標題，而 <h3> 元素代表每個章節的子部分。

<h1>The Crushing Bore</h1>

<p>By Chris Mills</p>

<h2>Chapter 1: The dark night</h2>

<p>
  It was a dark night. Somewhere, an owl hooted. The rain lashed down on the…
</p>

<h2>Chapter 2: The eternal silence</h2>

<p>Our protagonist could not so much as a whisper out of the shadowy figure…</p>

<h3>The specter speaks</h3>

<p>
  Several more hours had passed, when all of a sudden the specter sat bolt
  upright and exclaimed, "Please have mercy on my soul!"
</p>

至於涉及的元素代表什麼，完全取決於你，只要層次結構合理即可。你在建立此類結構時只需記住一些最佳實踐。

• 最好每頁只使用一個 <h1>——這是最高級別的標題，所有其他標題都位於其層次結構之下。
• 確保你按照正確的層次順序使用標題。不要使用 <h3> 元素來表示副標題，然後使用 <h2> 元素來表示次級副標題——這沒有意義，會導致奇怪的結果。
• 在六個可用的標題級別中，除非你認為有必要，否則每頁應儘量不要超過三個。擁有許多級別（例如，深層標題層次結構）的文件會變得笨重且難以導航。在這種情況下，如果可能的話，建議將內容分散到多個頁面上。

為什麼我們需要結構？

為了回答這個問題，我們來看看 text-start.html——一個美味的鷹嘴豆泥食譜。該文件的主體目前包含多段內容。它們沒有以任何方式標記，但用換行符（按 Enter/Return 鍵進入下一行）分隔。

然而，當你在瀏覽器中開啟文件時，你會看到文字顯示為一大塊！

這是因為沒有元素為內容提供結構，所以瀏覽器不知道什麼是標題，什麼是段落。此外，

• 檢視網頁的使用者傾向於快速掃描以查詢相關內容，通常首先只閱讀標題。（我們通常在網頁上停留的時間很短。）如果他們幾秒鐘內看不到任何有用的東西，他們可能會感到沮喪並轉到別處。
• 搜尋引擎在索引你的頁面時，會將標題內容視為影響頁面搜尋排名重要關鍵詞。沒有標題，你的頁面在 SEO（搜尋引擎最佳化）方面表現不佳。
• 視力嚴重受損的人通常不閱讀網頁；他們而是聽網頁。這是透過名為螢幕閱讀器的軟體完成的。該軟體提供快速訪問給定文字內容的方式。在使用的各種技術中，它們透過朗讀標題來提供文件的綱要，讓使用者快速找到他們需要的資訊。如果沒有標題，他們將被迫聽完整篇文件的朗讀。
• 要用 CSS 來樣式化內容，或者用 JavaScript 來做有趣的事情，你需要有元素來包裹相關內容，這樣 CSS/JavaScript 才能有效地定位它。

因此，我們需要為內容提供結構化標記。

為內容提供結構

讓我們直接開始，讓你解決一個小小的程式碼挑戰，以練習 HTML 標題和段落。

1. 單擊下面程式碼塊中的**“播放”**以在 MDN Playground 中編輯示例。
2. 將內容開頭的適當文字包裹在 <h1> 元素中，將其轉換為主標題。
3. 有兩對詞應該包裹在 <h2> 元素中，將它們轉換為二級標題。
4. 將剩餘的句子包裹在 <p> 元素中，將它們轉換為段落。每個 <h2> 元素下方都應該有一個 <p> 元素。

如果您犯了錯誤，可以使用 MDN Playground 中的重置按鈕清除您的工作。如果您真的卡住了，可以在程式碼塊下方檢視解決方案。

Favorite body parts The brain Lovely shape and color. Also does thinkin' stuff.
The feet Knobbly and ugly, but useful for getting about.

<h1>Favorite body parts</h1>

<h2>The brain</h2>

<p>Lovely shape and color. Also does thinkin' stuff.</p>

<h2>The feet</h2>

<p>Knobbly and ugly, but useful for getting about.</p>

為什麼我們需要語義？

語義無處不在——我們依靠過去的經驗來告訴我們日常物品的功能；當我們看到某物時，我們知道它的功能會是什麼。例如，我們期望紅綠燈表示“停止”，綠燈表示“通行”。如果應用了錯誤的語義，事情很快就會變得棘手。（有沒有哪個國家用紅色表示“通行”？我們希望沒有。）

類似地，我們需要確保我們正在使用正確的元素，賦予我們的內容正確的含義、功能或外觀。在這種情況下，<h1> 元素也是一個語義元素，它賦予其所包裹的文字“頁面上頂級標題”的角色（或含義）。

<h1>This is a top level heading</h1>

預設情況下，瀏覽器會給它一個大字型，使其看起來像一個標題（儘管你可以使用 CSS 將其樣式化為任何你想要的樣子）。更重要的是，它的語義值將以多種方式使用，例如被搜尋引擎和螢幕閱讀器使用（如上所述）。

另一方面，你可以使任何元素看起來像一個頂級標題。請看以下內容：

<span style="font-size: 32px; margin: 21px 0; display: block;">
  Is this a top level heading?
</span>

這是一個 <span> 元素。它沒有語義。當你想要對內容應用 CSS（或使用 JavaScript 對其執行某些操作）而又不賦予它任何額外含義時，你使用它來包裹內容。（你將在本課程的後面瞭解更多關於這些內容的資訊。）我們已經對其應用了一些 CSS，使其看起來像一個頂級標題，但由於它沒有語義值，它將不會獲得上述任何額外的好處。使用適用於該任務的相關 HTML 元素是一個好主意。

總結

至此，我們對 HTML 標題和段落的學習就結束了。接下來，我們將探討語義化 HTML 的更多方面：強調詞語。

• 上一頁
• 概述：使用 HTML 構造內容
• 下一頁