HTML Heading Tags

by

HTML Heading Tags: Heading a title or a subtitle for a web page or a section of a web page. We will learn six types of headings, from <h1> (the most important) to <h6> (the least important). The web browser always displays the heading element text in a larger and bolder font.

The heading tags are used to create a document outline, which is very helpful for screen readers and search engines.

Creating the wrong heading level can create confusion for users and negatively impact accessibility and SEO. So, the heading tags should be always in a hierarchical order like h1, h2, h3, h4, h5, and h6.

html heading tags

What’s before –

Before getting started, You should have a basic understanding of the following topics –

What are HTML Elements

All HTML Headings List

<h1></h1> h1 headingFirst Heading
<h2></h2> h2 headingSecond Heading
<h3></h3> h3 headingThird Heading
<h4></h4> h4 headingFourth Heading
<h5></h5> h5 headingFifth Heading
<h6></h6> h6 headingSixth Heading

What is Heading

The heading is the most important part of the web page. Which shows what the description or content has been written about.

You can see the Headings of this article. It is known from the first Heading that the information about HTML Heading has been given.

The heading is written before any content or description. So that it can be known what information is going to be received.

The way the Heading is written in any News Paper and Magazine. In the same way, HTML Heading is also written on the web page.

What is HTML Heading Tag

A heading tag is a container that contains heading text and sub-heading text.

Heading Tags is a  block-level element. Because It covers the full width of the screen without leaving any space from the left & right sides.

The heading tag is used to display titles and subtitles of any content on the web page.

Heading tags should be always just above any content.

HTML – Heading Syntax

The Syntax of the heading is created with Open Heading Tag, Close Heading Tag & Content.

<headingTagName>content</HeadingTagName>
  • <headingTagName> – Open Heading Tag
  • Content –  Heading Text
  • </HeadingTagName> Close Heading Tag

Important Points

Heading Elements are not case-sensitive. This means that you can write it in lowercase or uppercase.

  • <headingtagname></headingtagname> – Lower Case ( Recommended)
  • <HEADINGTAGNAME></HEADINGTAGNAME> – Upper Case

Note: – Heading Elements are always declared within <body></body> Element.

Types of HTML Headings

The are 6 types of HTML headings –

  • h1 heading
  • h2 heading
  • h3 heading
  • h4 heading
  • h5 heading
  • h6 heading

HTML – h1 Heading

The h1 heading is the First heading of the web page.

The h1 heading is used to give the title of the content

Syntax –

<h1>text here</h1>

Where –

h1 Heading Elements are not case-sensitive. This means that you can write it in lowercase or uppercase.

  • <h1></h1> – Lower Case ( Recommended)
  • <H1></H1> – Upper Case

Note: – h1 Heading Elements are always declared within <body></body> Element.

Example –

<h1>First Heading dummy Text</h1>

 

HTML – h2 Heading

The h2 heading is the second heading that comes under the h1 heading.

The h2 heading is used to specify the sub-heading of the content.

Syntax –

<h2>Text here</h2>

Where –

h2 Heading Elements are not case-sensitive. This means that you can write it in lowercase or uppercase.

  • <h2></h2> – Lower Case ( Recommended)
  • <H2></H2> – Upper Case

Note: – h2 Heading Elements are always declared within <body></body> Element.

Example –

<h2>Second Heading dummy Text</h2>

 

HTML – h3 Heading

The h3 heading is the third heading that comes under the h2 heading.

The h3 heading is used to specify the sub-heading of the content.

Syntax –

<h3>text here</h3>

Where –

h3 Heading Elements are not case-sensitive. This means that you can write it in lowercase or uppercase.

  • <h3></h3> – Lower Case ( Recommended)
  • <H3></H3> – Upper Case

Note: – h3 Heading Elements are always declared within <body></body> Element.

Example –

<h3>Third Heading dummy Text</h3>

HTML – h4 Heading

The h4 heading is the third heading that comes under the h3 heading.

The h4 heading is used to specify the sub-heading of the content.

Syntax –

<h4>Text here</h4>

Where –

h4 Heading Elements are not case-sensitive. This means that you can write it in lowercase or uppercase.

  • <h4></h4> – Lower Case ( Recommended)
  • <H4></H4> – Upper Case

Note: – h4 Heading Elements are always declared within <body></body> Element.

Example –

<h4>Fourth Heading dummy Text</h4>

HTML – h5 Heading

The h5 heading is the third heading that comes under the h4 heading.

The h5 heading is used to specify the sub-heading of the content.

Syntax –

<h5>text here</h5>

Where –

h5 Heading Elements are not case-sensitive. This means that you can write it in lowercase or uppercase.

  • <h5></h5> – Lower Case ( Recommended)
  • <H5></H5> – Upper Case

Note: – h5 Heading Elements are always declared within <body></body> Element.

Example –

<h5>Fifth Heading dummy Text</h5>

HTML – h6 Heading

The h6 heading is the third heading that comes under the h5 heading.

The h6 heading is used to specify the sub-heading of the content.

Syntax –

<h6>text here</h6>

Where –

h6 Heading Elements are not case-sensitive. This means that you can write it in lowercase or uppercase.

  • <h6></h6> – Lower Case ( Recommended)
  • <H6></H6> – Upper Case

Note: – h6 Heading Elements are always declared within <body></body> Element.

Example –

<h6>Sith Heading dummy Text</h6>

 

Advantages of HTML Headings

  • Headings support all web browsers
  • Heading can display titles & sub-titles of the content
  • Headings are the most important for the Search Engine
  • Headings describe content information

Disadvantages of HTML Headings

  • Headings can not be used as a paragraph
  • Headings contain only text
  • Only a single h1 heading can be declared on a page for SEO purposes

Importance of Headings in SEO

Heading Element is the most important element from SEO’s senses. Because Search Engine can easily search any content from Heading Elements.

To use the heading element according to SEO, understand the rule given in the next step very well.

Rules of HTML Headings

Some Important Rules of HTML headings are given below. which is the best for content & SEO Purose –

  • Heading elements should be used with order h1, h2, h3, h4, h5, and h6.
  • Only a Single h1 heading must be used on each page.
  • h2 heading should be after the h1 heading.
  • h3 heading should be after the h2 heading.
  • The h4 heading should be after the h3 heading.
  • h5 heading should be after the h4 heading.
  • h6 heading should be after the h5 heading.

Example –

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>

    <h1>h1 Heading Text</h1>
    <p>First Paragraph text</p>
    <p>Second Paragraph text</p>

    <h2>h2 Headinng text</h2>
    <p>First Paragraph text</p>
    <p>Second Paragraph text</p>

    <h3>h3 Headinng text</h3>
    <p>First Paragraph text</p>
    <p>Second Paragraph text</p>

    <h4>h4 Headinng text</h4>
     <p>First Paragraph text</p>
    <p>Second Paragraph text</p>

    <h5>h5 Headinng text</h5>
    <p>First Paragraph text</p>
    <p>Second Paragraph text</p>

    <h6>h6 Headinng text</h6>
     <p>First Paragraph text</p>
    <p>Second Paragraph text</p>

  </body>
</html>

Example of Headings

In this example, We have taken all six headings h1 to h6. You can try it yourself

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>

    <h1>First Heading Text</h1>
    <h2>Second Heading Text</h2>
    <h3>Third Heading Text</h3>
    <h4>Fourth Heading Text</h4>
    <h5>Fifth Heading Text</h5>
    <h6>Sixth Heading Text</h6>


  </body>
</html>