DAY4 標籤、標題

2026 iThome 鐵人賽

DAY 4

Modern Web

從結構到互動：現代前端HTML、CSS 、JS 的 30 天修練系列第 4 篇

18th鐵人賽

yelloworange0319

團隊nutc imac

2026-09-18 13:46:17

79 瀏覽

分享至

用標籤賦予文字「語意」

在上一篇文章中，我們認識了網頁的黃金骨架，今天我們要正式動手在網頁裡塞入各種文字內容。

在HTML中，全部都只用純文字會讓你看得非常痛苦，如果不加上標籤，瀏覽器只會把所有文字擠成一團，因此，我們會使用各種不同的標籤（Tags） 來告訴瀏覽器：「這是一行標題」、「這是一個段落」，或是「這是一段強調的文字」。這種讓文字具備結構與意義的作法，在網頁開發中被稱為語意化（Semantic）。

標題標籤（H1 ~ H6）

在閱讀報紙或雜誌時，我們一打看頁面，首先吸引眼球的絕對是大標題，而HTML提供了 <h1>到<h6> 共六種層級的標題標籤，依據重要性與字體大小依序遞減。

我們先看看它們寫成程式碼的模樣：

<h1>這是最重要的大標題（H1）</h1>
<h2>這是次要的次標題（H2）</h2>
<h3>這是小節標題（H3）</h3>
<h4>這是更小的標題（H4）</h4>
<h5>這是微型標題（H5）</h5>
<h6>這是最小的標題（H6）</h6>

標題標籤三大鐵律：

<h1> 一頁只能有一個：這就像是一本書只會有一個書名、一份報紙只會有一個標題，<h1> 通常用來放網站的Logo或該頁面最重要的核心標題，如果放太多個，搜尋引擎（例如Google）會抓不到你的網頁重點，導致SEO排名變差。
階層不能跳格：標題的結構必須像寫論文一樣循序漸進，先有<h1>，接著是<h2>、<h3>。絕對不要因為覺得<h3>的字體大小比較好看，就直接從<h1>跳到<h3>，這樣會破壞網頁的語意結構。
不要用標題標籤來調整字體大小：如果你只是單純想讓某行字變大，請使用 CSS。標題標籤的本質是為了定義內容結構的重要性，而不是為了視覺美觀。

常用的文字段落標籤

除了標題之外，網頁絕大多數的內容都是由一般內文組成的，下面介紹三個最重要的文字標籤：

1.段落標籤`<p>`

功能：用來包覆完整的文字段落（Paragraph）。
特性：瀏覽器會自動在<p>標籤的上方與下方建立垂直的「空白間距」，讓段落與段落之間有呼吸的空間，提升閱讀舒適度。

2.強調文字標籤`<strong>`與`<em>`

功能：當你想在段落中凸顯某些關鍵字時，就可以使用這兩個標籤。
特性：被<strong>包覆的文字，瀏覽器預設會以粗體呈現（代表語意上的強烈重要性）；而被<em>包覆的文字則會以斜體呈現（代表語意上的強調）。

3.強制換行標籤`<br>`

功能：在 HTML 中，如果你在編輯器裡直接按下 Enter 鍵換行，瀏覽器是讀不懂的（它只會顯示成一個空格），如果你想要在「同一個段落內」強制換行，就必須使用 <br>（Break）標籤。
特性：它是一個單一標籤（空標籤），不需要寫成对的</br>，只要單獨寫<br>即可。

總結

今天我們學會了如何使用 <h1>~<h6> 來建立網頁的層級結構，並學會了用 <p>、<strong>、<br> 來豐富我們的文字排版。明天，我們將繼續為網頁骨架增添更多血肉。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>我們學會了標題<h1>h1</h1>到<h6>h6</h6> <em>斜體</em> 還有<strong>粗體</strong></p>
</body>
</html>