HTML H1 H2 H3 H4 H5 H6 標題

HTML 有分不同重要程度的標題標籤,從最重要的標題 H1 開始到最不重要的 H6 標題,在瀏覽器預設情況下,H1 的字體最大,H6 的字體最小,不過這些預設字體的大小都可以透過 CSS 來做修改, 在網頁中要如何挑選這些 <H1><H2> ... <H6> 來標示標題呢?最簡單的方式就是依照重要性來選用,通常一篇文章用到 <H1> <H2> 甚至 <H3> 就已經很多了,少部分才會用到 <H4> <H5> 甚至 <H6>。

HTML H1 H2 H3 H4 H5 H6 標題使用語法

<H1>這裡是標題文字</H1> 或 <h1>這裡是標題文字</h1>


與一般標準的 HTML 標籤使用方式一樣,只要將標題文字放在 <H1></H1> 標籤中間即可,大小寫沒有差別,也就是 H1 與 h1 這樣寫都可以,無論是 H1、H2、H3、H4、H5 還是 H6 都是一樣的寫法,所有的主流瀏覽器都支援。

HTML H1 H2 H3 H4 H5 H6 範例一、比較大小
<H1>這裡是 Wibibi 標題 H1 所呈現的效果</H1>
<H2>這裡是 Wibibi 標題二</H2>
<H3>這裡是 Wibibi 標題三</H3>
<H4>這裡是 Wibibi 標題四</H4>
<H5>這裡是 Wibibi 標題五</H5>
<H6>這裡是 Wibibi 標題六</H6>
以上範例輸出結果

這裡是 Wibibi 標題 H1 所呈現的效果

這裡是 Wibibi 標題 H2 所呈現的效果

這裡是 Wibibi 標題 H3 所呈現的效果

這裡是 Wibibi 標題 H4 所呈現的效果

這裡是 Wibibi 標題 H5 所呈現的效果
這裡是 Wibibi 標題 H6 所呈現的效果
由範例可以看到 H1 的標準字體最大,H6 標準字體則最小,小到有點看不太清楚,若未使用 CSS 處理過,看起來有點吃力,不建議在網頁內文中使用 H6 甚至是 H5 來呈現,除非有做後續的 style 設計。另外,H1~H6 標籤預設有 align 的效果,就是文字靠左、置中或靠右。

HTML H1 H2 H3 H4 H5 H6 範例二、加入 align 的標題
<H2 align="center">這裡是置中標題</H2>
<H2 align="right">這裡是靠右標題</H2>
以上範例輸出結果

這裡是置中標題

這裡是靠右標題

範例採用 H2 做為參考,其他像是 H1、H3、H4、H5、H6 都有這樣對齊方式,預設的 align 文字對齊效果能夠輕鬆設定標題的位置,可以使用的屬性值有 left(靠左)、center(置中)、right(靠右)、justify(文字行兩邊都對齊) 等,但這個屬性在 HTML 4.0.1 之後的版本就已經不建議使用,且在 HTML5 中不支援,取而代之的建議使用方式是透過 CSS text-align 來設定。

相關主題研究
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012