❮ Previous Next ❯

HTML Heading

The HTML heading is used to define heading of an HTML document. It is also among the most commonly used HTML elements.
Heading is very important in every page. All pages include heading part. For example if you want to write an essay about 'Games and Sports' in examination, firstly you give heading as "Games and Sports" before writing content. Apart from examination, any web-page requires heading section.
There are six levels of HTML heading based on the difference of the font size:

<h6> < <h5> < <h4> < <h3> < <h2> < <h1>

It means that the heading font-size within the <h1> element is the biggest one by default while <h6> being the smallest heading.

Type: Block Element

1. <h1> heading

This is the biggest heading which means it has biggest font-size than the rest by default.

Default CSS properties of <h1> element
h1 {
display: block;
font-size: 2em;
margin: 0.67em 0;
font-weight: bold;
}

2. <h2> heading

This is the second-biggest heading by default.

Default CSS properties of <h2> element
h2 {
display: block;
font-size: 1.5em;
margin: 0.83em 0;
font-weight: bold;
}

3. <h3> heading

This is the third-biggest heading by default.

Default CSS properties of <h3> element
h3 {
display: block;
font-size: 1.17em;
margin: 1em 0;
font-weight: bold;
}

4. <h4> heading

This is the third-smallest heading by default.

Default CSS properties of <h4> element
h4 {
display: block;
font-size: 1em;
margin: 1.33em 0;
font-weight: bold;
}

5. <h5> heading

This is the second-smallest heading by default.

Default CSS properties of <h5> element
h5 {
display: block;
font-size: .83em;
margin: 1.67em 0;
font-weight: bold;
}

6. <h6> heading

This is the smallest heading by default.

Default CSS properties of <h6> element
h6 {
display: block;
font-size: 0.67em;
margin: 2.33em 0;
font-weight: bold;
}

Using of each Heading element

Tag Usage
<h1> It is used to mention the main topic or title of the page.
<h2> It is used in the main important section of the main topic.
<h3> It is used for the subsection heading.
<h4> It is used to specify minor heading.
<h5> It is used for small heading.
<h6> It is used in the least important heading.

Full code example

<!DOCTYPE html>
<html>
<head>
<style>
h1 { color: red; }
h2 { color: blue; }
h3 { color: green; }
h4 { color: brown; }
h5 { color: gray; }
h6 { color: black; }
</style>
</head>

<body>

<h1>Heading 1</h1>
<p>It is the main heading</p>

<h2>Heading 2</h2>
<p>It is used for major content heading.</p>

<h3>Heading 3</h3>
<p>It is a sub-heading under a content.</p>

<h4>Heading 4</h4>
<p>It is used for minor section.</p>

<h5>Heading 5</h5>
<p>It is used for less unimportant title.</p>

<h6>Heading 6</h6>
<p>This is the lowest size heading.</p>

</body>
</html>
Run The code »

Output on the browser

Heading 1

It is the main heading

Heading 2

It is used for major content heading.

Heading 3

It is a sub-heading under a content.

Heading 4

It is used for minor section.

Heading 5

It is used for less important title.

Heading 6

This is the lowest size heading.

Attribute of <h1>-<h6> tag

Attribute Value Note
align left
right
center
justify		 It specifies the alignment of each heading.

The align attribute is not supported in HTML5 and replaced by CSS properties.

Using of align attribute in older HTML (4.01).
<h1 align="center">
Center-align heading
</h1>

There are two ways to replace the deprecated align attribute of HTML heading.

1. Using style attribute to the HTML heading only applies to this heading, not other heading section of the page.

<h1 style="text-align:center;">
Center-align heading
</h1>

2. Using heading element within the <style> tag applies the same style (here alignment) for HTML <h1> element in the whole page. Each <h1> content from the different section will be center-aligned.

<style>
h1 {
  text-align: center;
}
</style>

<h1>
Center-align heading
</h1>

Custom font-size of each heading

With CSS property-font-size, the size of heading can be changed customly. 

---------
<style>
h2 {
  font-size: 20px;
}
</style>
---------
<h2>
Custom size heading
</h2>
❮ Previous Next ❯