HTML <h1> 到 <h6> 標簽

定義和用法

<h1> 到 <h6> 標簽用于定義 HTML 標題。

<h1> 定義最重要的標題。<h6> 定義最不重要的標題。

注意

每個頁面只使用一個 <h1> - 這應該代表整個頁面的主要標題/主題。此外，請不要跳過標題級別 - 從 <h1> 開始，然后使用 <h2>，以此類推。

由于 h 元素擁有確切的語義，因此請您慎重地選擇恰當的標簽層級來構建文檔的結構。因此，請不要利用標題標簽來改變同一行中的字體大小。相反，我們應當使用層疊樣式表定義來達到漂亮的顯示效果。

如果您希望了解更多有關 HTML 標簽選擇和使用的信息，請閱讀《Web 品質》。

另請參閱：

HTML 教程：HTML 標題

HTML DOM 參考手冊：Heading 對象

實例

例子 1

六個不同的 HTML 標題：

<h1>這是標題 1</h1>
<h2>這是標題 2</h2>
<h3>這是標題 3</h3>
<h4>這是標題 4</h4>
<h5>這是標題 5</h5>
<h6>這是標題 6</h6>

親自試一試

例子 2

設置標題的背景顏色和文本顏色（使用 CSS）：

<h1 style="background-color:DodgerBlue;">Hello World</h1>
<h2 style="color:Tomato;">Hello World</h2>

親自試一試

例子 3

設置標題的對齊方式（使用 CSS）：

<h1 style="text-align:center">這是標題 1</h1>
<h2 style="text-align:left">這是標題 2</h2>
<h3 style="text-align:right">這是標題 3</h3>
<h4 style="text-align:justify">這是標題 4</h4>

親自試一試

全局屬性

<h1> - <h6> 標簽還支持 HTML 中的全局屬性。

事件屬性

<h1> - <h6> 標簽還支持 HTML 中的事件屬性。

默認的 CSS 設置

大多數瀏覽器將使用以下默認值顯示 <h1> 元素：

例子 1

h1 {
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

親自試一試

大多數瀏覽器將使用以下默認值顯示 <h2> 元素：

例子 2

h2 {
  display: block;
  font-size: 1.5em;
  margin-top: 0.83em;
  margin-bottom: 0.83em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

親自試一試

大多數瀏覽器將使用以下默認值顯示 <h3> 元素：

例子 3

h3 {
  display: block;
  font-size: 1.17em;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

親自試一試

大多數瀏覽器將使用以下默認值顯示 <h4> 元素：

例子 4

h4 {
  display: block;
  font-size: 1em;
  margin-top: 1.33em;
  margin-bottom: 1.33em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

親自試一試

大多數瀏覽器將使用以下默認值顯示 <h5> 元素：

例子 5

h5 {
  display: block;
  font-size: .83em;
  margin-top: 1.67em;
  margin-bottom: 1.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

親自試一試

大多數瀏覽器將使用以下默認值顯示 <h6> 元素：

例子 6

h6 {
  display: block;
  font-size: .67em;
  margin-top: 2.33em;
  margin-bottom: 2.33em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

親自試一試

瀏覽器支持

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
支持 支持 支持 支持 支持