HTML 標題 h1~h6:層級結構與 SEO 寫法
<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>與網頁標題的差別
<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> 裡,是使用者在畫面上看到的主標題。兩者內容可以相近,但用途不同。