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 heading elements. These headings are <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>.

Heading elements are used to write headings on a webpage, whereas the <p> tag is for plain text. All headings are bold and block-level elements.

The font size of headings gradually decreases from <h1> to <h6>. By default, <h1> is the largest (2em), <h2> is 1.5em, <h3> is 1.17em, <h4> is the same as a paragraph (1em), and <h5> (0.83em) and <h6> (0.67em) are smaller.

Headings in Html

  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 Example with code

How to write headings in HTML from h1 to h6, with a code 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>

The H1 tag or <h1> is the main heading or level-one heading of a webpage. Search engines like Google, Yahoo, and Bing give maximum priority to the h1 element. As per SEO best practices, the h1 tag should be used only once per webpage. The default font size of an h1 element is 2em, and it's bold.

Heading 1


<h1> Heading 1 </h1>

Rules for h1 Tag

  1. Use proper headings. Do not use headings just to make text bold or large.
  2. Always start with <h1>, followed by <h2>, and so on, maintaining a logical hierarchy.
  3. Do not repeat the <h1> tag on the 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

The <h2> tag is always used after an <h1>. The number of <h2> tags on a webpage 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 SEO guidelines, it is compulsory to define at least one <h1> and subsequent headings like <h2> on a webpage to structure your content.