How To Use h1 to h6 Headings Properly

Headings are Block Elements that generate an automatic line break. For this reason, it is not necessary to force a line break by using the <br> tag before and after the heading.

In HTML, Headings are created with the HTML tags <h1> to <h6>. The most important heading is h1, followed by the headings h2, h3, … in hierarchical order.

The Main Heading of the web page is marked with H1 and should only be used once on each and every page. To structure the text logically, the headings H2, H3, … should be used as Subheadings to divide the text into logical sections.

Headings are started with the HTML tags <h1>, <h2>, <h3>, … and must be closed with the corresponding closing tag </h1>, </h2>, </h3>>, …. Without CSS, the headings are displayed in 6 different Font Sizes by default.

Heading	Font Size
H1 Heading	2em
H2 Heading	1.5em
H3 Heading	1.17em
H4 Heading	1em
H5 Heading	0.83em
H6 Heading	0.75em

Example

A Level 1 Heading (main level) is created with the HTML <h1> tag.

<h1>This is a 1st Order Heading</h1>

Output of the HTML code

This is a 1st Order Heading

This background represents the screen and is not part of the sample code. Example

A Level 2 Heading is created with the HTML <h2> tag.

<h2>This is a 2nd Order Heading</h2>

Output of the HTML code

This is a 2nd Order Heading

This background represents the screen and is not part of the sample code. Example

A Level 3 Heading is created with the HTML <h3> tag.

<h3>This is a 3rd Order Heading</h3>

Output of the HTML code

This is a 3rd order heading

This background represents the screen and is not part of the sample code.

Headings divide the web page into hierarchical text areas that provide structure for readers and Search Engines. Do not skip or omit any heading level. Always start from <h1>, followed by <h2> and so on. For the majority of web pages, the H1 to H3 headings are completely sufficient.

Note:

It is necessary to use the correct closing tag of the heading.