HTML Headings

HTML includes Six headings elements. These headings are <h1>, <h2>, <h3>, <h4>, <h5> and <h6>.

Heading elements are used to write headings in a webpage, whereas p tag is only for plain text. All Headings are bold and block level elements.

Font size of all heading gradually decreases. For example h1 is twice of p, h2 is 1.5% of p tag, h3 is 1.17% of p tag and h4 and p tags are of same font size. h5 and h6 are smaller than p tag.

HTML Headings Example

  1. Heading 1 ( <h1>)
  2. Heading 2 ( <h2>)
  3. Heading 3 ( <h3>)
  4. Heading 4 ( <h4>)
  5. Heading 5 ( <h5>)
  6. Heading 6 ( <h6>)

Headings Code

Html headings example.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6


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

HTML h1 tag <h1>

H1 tag or <h1> is the main heading or level one heading of a webpage. Search engines like google, yahoo, bing etc gives maximum priority to the h1 element. As per search engine parameters, h1 tag should be used only once in a webpage. Default Font size of h1 element is 2em.

Heading 1


<h1> Heading 1 </h1>
		

HTML h2 tag <h2>

H2 tag or <h2> is the sub heading of h1 element. It is recommended to use headings in proper order for better search results.

Heading 2


<h2> Heading 2 </h2>
		

HTML Headings Example

In the example below, we are building a webpage with title and h1 Web Designing. In the body, we will start with h1 tag first, and then other headings.


<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Web Designing</title>
</head>
<body>
    <h1>Web Designing</h1>	
    <p>Description for web designing</p>
	
        <h2>HTML</h2>
        <p>Description for HTML</p>
		
            <h3>HTML 4</h3>
            <p>Description for HTML4</p>
			
            <h3>HTML 5</h3>
            <p>Description for HTML5</p>
			
        <h2>CSS</h2>
        <p>Description for CSS</p>
		
            <h3>CSS 2</h3>
            <p>Description for css2</p>
			
            <h3>CSS 3</h3>
            <p>Description for css3</p>
			
        <h2>Javascript</h2>
        <p>Description for JavaScript</p>
		
            <h3>Javascript</h3>
            <p>Description for Javascript</p>
			
            <h3>Jquery</h3>
            <p>Description for Jquery</p>
</body>
</html>

As per Search Engine Rules, it is compulsory to define atleast h1 and h2 in a webpage.