HTML Headings



HTML specifies six levels of headings. All heading element has its own font size and spacing before and after the heading.

Headings are defined with the <h1> to <h6> tags.

<h1> gives the largest heading and <h6> gives the smallest one.

<h1> defines the most important (highest level) heading. <h6>defines the least important heading.


Example :  

<!DOCTYPE html> 
<html lang="en">

<head>
 <meta charset="UTF-8">
 <title> HTML Heading Tag </title>
</head>

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

</html> 

Output :

This is Heading 1

This is Heading 2

This is Heading 3

This is Heading 4

This is Heading 5
This is Heading 6

Note: Heading elements (h1....h6) should be used for headings only. They should not be used just to make text bold or big.



Important of Headings

HTML Heading tags are important for users as well as Search Engines.

  • Heading tags helps users to pay attention to the main headings.
  • Search engines (such as Google) also use your headings to understand the important components of your website.
  • We should use HTML headings to define headings content only. It should not be used just to make text big or bold.