HTML Headings

Written By:

Updated on

HTML Tutorial rating by Jasmine ⭑ ⭑ ⭑ ⭑ ⭑ Average rating: 5.0, based on 69 reviews
  1. Home
  2. Frontend
  3. Html
  4. Html Headings

Heading Elements h1 - h6

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 and its bold.

Heading 1


<h1> Heading 1 </h1>

Rules for h1 Tag

  1. Use proper headings. Do not use heading to increase font size.
  2. Always starts with h1 followed by h2 and next.
  3. Do not repeat h1 in same page.

HTML h2 tag <h2>

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

Heading 2


<h2> Heading 2 </h2>

Correct Way to use h2

h2 is always used after h1. Number of h2 in a webpage can can vary.

Heading 1

Heading 2


  <h1> Heading 1 </h1>
  <h2> Heading 2 </h2>

HTML Headings Example

In the example below, we are building a webpage with title and h1 Frontend. 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>Frontend</title>
</head>
<body>
    <h1>Frontend</h1>	
    <p>Description for Frontend Web Development</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>JS ES6</h3>
            <p>Description for JS ES6 and above</p>
</body>
</html>

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