A HTML heading or HTML h tag can be characterized as a title or a caption which you need to show on the webpage. Whenever you place the text inside the heading tags <h1>.........</h1>, it is shown on the browser in the bold format and size of the text relies upon the quantity of heading.

HTML heading tags


There are six unique HTML heading tags in HTML which are characterized with the <h1> to <h6> tags, from elevated level h1 (main heading) to the least level h6 (least important heading).

h1 is the largest heading tag and h6 is the littlest one. So h1 is utilized for most significant heading and h6 is utilized for least significant.


  • Headings tags in HTML helps the search engine to comprehend and index the design of web page.

Note: The main keyword of the entire substance of a webpage ought to be show by h1 heading tag.

Example:


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


Output:

Heading no. 1

Heading no. 2

Heading no. 3

Heading no. 4

Heading no. 5
Heading no. 6

  • Heading elements (h1....h6) ought be utilized for headings only. They ought not be used just to make text bold or big.
  • HTML headings can likewise be utilized with nested components. Following are various codes to show the method for utilizing heading components.

Example:


<!DOCTYPE html>
<html>
 <head>
	<title>Heading elements</title>
 </head>
 <body>
	<h1>
    This is main heading of page.
    </h1>
	<p>
    h1 is the most important heading,
     which is used to display the keyword
     of page </p>
	<h2>
    This is first sub-heading
    </h2>
   <p>
   h2 describes the first sub 
   heading of page.
   </p>
	<h3>
    This is Second sub-heading
    </h3>
	<p>
    h3 describes the second sub 
    heading of page.
    </p>
   <p>
   We can use h1 to h6 tag to use 
   the different sub-heading with 
   their paragraphs if required. 
    </p>
   </body>
</html>


Output:


This is main heading of page.

h1 is the most important heading, which is used to display the keyword of page

This is first sub-heading

h2 describes the first sub heading of page.

This is Second sub-heading

h3 describes the second sub heading of page.

We can use h1 to h6 tag to use the different sub-heading with their paragraphs if required.


Importance of Headings in HTML

  • HTML headings give significant data by highlighting significant points and the design of the document, so upgrade them carefully to develop user engagement.
  • Don't utilize headings to make your text look BIG or strong. Use them just for highlighting the heading of your document and to show the record structure.
  • Since search engines, for example Google, use headings to index the construction and content of the web pages so use them very wisely in your webpage.
  • Utilize the <h1> headings as main headings of your web page, trailed by the <h2> headings, then, at the point,the less important <h3> headings, etc.

Supported Browsers List: 

  • Google Chrome 93.0
  • Microsoft Edge 93.0
  • Internet Explorer 11.0
  • Firefox 92.0
  • Opera 78.0
  • Safari 14.1

Previous                                                                                             Next