❮ Previous Next ❯

HTML <h1>-<h6> tag

The <h1>-<h6> tags are used to define heading of an HTML document. It is also among the most commonly used HTML elements. 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

Syntax of <h1>-<h6> tag

<h1> Heading1 </h1>
<h2> Heading2 </h2>
<h3> Heading3 </h3>
<h4> Heading4 </h4>
<h5> Heading5 </h5>
<h6> Heading6 </h6>
HTML heading tags support global HTML attributes, such as id, class,style,title.

Supported Browsers

Tag Chrome Internet Explorer Firefox Safari Opera Mini
<h1>-<h6> Yes Yes Yes Yes Yes

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.

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.

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>
Replacement by CSS for the above same code

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>

More reference

Default CSS properties of <h1> element
h1 {
display: block;
font-size: 2em;
margin: 0.67em 0;
font-weight: bold;
}
Default CSS properties of <h2> element
h2 {
display: block;
font-size: 1.5em;
margin: 0.83em 0;
font-weight: bold;
}
Default CSS properties of <h3> element
h3 {
display: block;
font-size: 1.17em;
margin: 1em 0;
font-weight: bold;
}
Default CSS properties of <h4> element
h4 {
display: block;
font-size: 1em;
margin: 1.33em 0;
font-weight: bold;
}
Default CSS properties of <h5> element
h5 {
display: block;
font-size: .83em;
margin: 1.67em 0;
font-weight: bold;
}
Default CSS properties of <h6> element
h6 {
display: block;
font-size: 0.67em;
margin: 2.33em 0;
font-weight: bold;
}
❮ Previous Next ❯