HTML <h1> to <h6> tags

Definition and usage

<h1> to <h6> Tags are used to define HTML titles.

<h1> Define the most important title.<h6> Define the least important title.

Note

Each page should use only one <h1> - This should represent the main title/theme of the entire page. Additionally, do not skip the title level - from <h1> start, then use <h2>and so on.

Since the h elements have a precise semantic, please choose the appropriate tag level carefully to construct the document structure. Therefore, do not use heading tags to change the font size on the same line. Instead, we should use the cascading style sheets definition to achieve a beautiful display effect.

If you want to learn more about the selection and usage of HTML tags, please read the book 'Web Quality》。

See also:

HTML Tutorial:HTML Titles

HTML DOM Reference Manual:Heading object

Example

Example 1

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>

Try It Yourself

Example 2

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

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

Try It Yourself

Example 3

Set the alignment of headings (using 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>

Try It Yourself

Global attributes

<h1> - <h6> Tags also support Global attributes in HTML.

Event attributes

<h1> - <h6> Tags also support Event attributes in HTML.

Default CSS settings

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

Example 1

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

Try It Yourself

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

Example 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;
}

Try It Yourself

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

Example 3

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

Try It Yourself

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

Example 4

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

Try It Yourself

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

Example 5

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

Try It Yourself

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

Example 6

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

Try It Yourself

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support