Tutorials 参考 练习 Videos NEW Menu
Paid Courses Website NEW

HTML <h1> to <h6> Tags


例子

The six different HTML headings:

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
来试试吧 »

More "来试试吧" examples below.


Definition and Usage

The <h1> to <h6> tags are used to define HTML headings.

<h1> defines the most important heading. <h6> defines the least important heading.

Note: Only use one <h1> per page - this should represent the main heading/subject for the whole page. Also, do not skip heading levels - start with <h1>, then use <h2>, and so on.


Browser Support

Element
<h1> - <h6> Yes Yes Yes Yes Yes

Global Attributes

The <h1> to <h6> tags also supports the Global Attributes in HTML.


Event Attributes

The <h1> to <h6> tags also supports the Event Attributes in HTML.



More 示例

例子

Set the background color and text color of headings (with CSS):

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

例子

Set the alignment of headings (with CSS):

<h1 style="text-align:center">This is heading 1</h1>
<h2 style="text-align:left">This is heading 2</h2>
<h3 style="text-align:right">This is heading 3</h3>
<h4 style="text-align:justify">This is heading 4</h4>
来试试吧 »

Related Pages

HTML tutorial: HTML标题

HTML DOM reference: Heading Object


Default CSS Settings

Most browsers will display the <h1> element with the following default values:

例子

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

Most browsers will display the <h2> element with the following default values:

例子

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

Most browsers will display the <h3> element with the following default values:

例子

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

Most browsers will display the <h4> element with the following default values:

例子

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

Most browsers will display the <h5> element with the following default values:

例子

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

Most browsers will display the <h6> element with the following default values:

例子

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