Skip to content

HTML 標題 h1~h6:層級結構與 SEO 寫法

HTML 標題元素 h1 到 h6:文件的層級結構

<h1><h6> HTML 元素代表六個級別的章節標題。<h1> 是最高的標題級別,<h6> 為最低,可用來定義該網頁中的大標、中標、小標。預設樣式為粗體字且有字級上的變化,但挑選的依據應該是內容的重要性,而不是字級大小。

html
<h1>我是標題</h1>
<h2>我是標題</h2>
<h3>我是標題</h3>
<h4>我是標題</h4>
<h5>我是標題</h5>
<h6>我是標題</h6>

不要讓同一個網頁內到處都是最重要的重點

試想一下,在同一個網頁中到處都是重點,那就變成都不重要了。因此,應避免同一個網頁上定義多個 <h1>

標題順序

定義順序從 <h1> 開始,然後是 <h2> 等等,不要跳過標題級別。

html
<!-- ✅ 一階一階往下 -->
<h1>前端工程文件</h1>
  <h2>HTML</h2>
    <h3>元素的組成</h3>
    <h3>文件架構</h3>
  <h2>CSS</h2>

<!-- ❌ 從 h2 直接跳到 h4 -->
<h1>前端工程文件</h1>
  <h2>HTML</h2>
    <h4>元素的組成</h4>

標題形成的層級就是這份文件的大綱。使用螢幕閱讀器的人可以只靠標題快速瀏覽整頁,跳號會讓他們搞不清楚現在讀到哪一層。

以文本的重要性定義標題

標題應以該文件內的重要性來定義,而不是以視覺化的方式來定義標題。

html
<!-- ❌ 為了字小一點而選 h5 -->
<h5>這其實是一個小節標題</h5>

<!-- ✅ 依重要性選層級,大小交給 CSS -->
<h3 class="text-sm">這是一個小節標題</h3>

小提醒

需要的只是粗體或大字,而不是一個標題時,請改用 段落 搭配 CSS 樣式,別借用標題元素。

與網頁標題的差別

<title> 寫在 <head> 裡,顯示在瀏覽器頁籤與搜尋結果;<h1> 寫在 <body> 裡,是使用者在畫面上看到的主標題。

html
<head>
  <title>HTML 標題 h1~h6:層級結構與 SEO 寫法|F2E 前端工程文件</title>
</head>
<body>
  <h1>HTML 標題 h1~h6:層級結構與 SEO 寫法</h1>
</body>

搜尋引擎會從標題階層推導出整頁的大綱,也可能在改寫搜尋結果的標題時改用 <h1>。這層作用與一頁一個 <h1> 的實務討論見 標題階層與 SEO 的關係

常見問題

一頁只能有一個 h1 嗎?

規格上允許多個,但實務上建議一頁只用一個。<h1> 代表這一頁的主題,滿頁都是重點等於沒有重點,也會讓搜尋引擎難以判斷這一頁到底在講什麼。

標題層級可以跳號嗎?

不建議。從 <h2> 直接跳到 <h4> 會讓文件大綱出現斷層,螢幕閱讀器的使用者靠標題層級瀏覽頁面時會迷路。層級要一階一階往下。

想要小一點的字,可以直接用 h5 嗎?

不行。標題要依內容的重要性來挑,字級大小交給 CSS 調整。用視覺大小挑標籤,會讓文件的結構與實際內容脫節。

網頁標題 title 和 h1 有什麼不同?

<title> 寫在 <head> 裡,顯示於瀏覽器頁籤與搜尋結果,頁面上看不到;<h1> 寫在 <body> 裡,是使用者在畫面上看到的主標題。兩者內容可以相近,但用途不同。

延伸閱讀