HTML Headings


Headings are defined with the <h1> to <h6> tags in HTML. <h1> defines the most important heading while <h6> defines the least important one both in display terms as well as search engine rankings as search engine use headings to index the structure and content of a web page.

Browsers automatically add some space on top and bottom of the headings while also occupying the entire length of the screen for that row even in case the title includes single text character only.

A large number of website users tend to skim through the headings only. So, it's important to use headings to organize the document structure and make it easily readable.

HTML Heading 1

HTML Heading 2

HTML Heading 3

HTML Heading 4

HTML Heading 5
HTML Heading 6
<h1>HTML Heading 1</h1>
<h2>HTML Heading 2</h2>
<h3>HTML Heading 3</h3>
<h4>HTML Heading 4</h4>
<h5>HTML Heading 5</h5>
<h6>HTML Heading 6</h6>

<h1> should be used for the main heading of a page while <h2> can be used for less important sub-headings while <h3> can be used for less important headings and so on. HTML headings are recommended to be used on headings only and not to make texts big or bold.

Each of the HTML headings are given a default size by broswers where <h1> appears the largest while <h6> appears the smallest which is smaller than regular text size. However, you can define the size of those headings as you require using style attribute with css font-size property in pixel(px) value.

<h1 style="font-size:50px">HTML Heading 1</h1>

HTML Horizontal Rule

The <hr> tag defines a logical break between content sections in an HTML page. It appears as a horizontal line between the contents.

<h1>This is HTML heading 1</h1>
<p>This is a paragraph.</p>
<hr>
<h2>This is HTML heading 2</h2>
<p>This is another paragraph.</p>
<hr>