HTML heading tags – h1, h2, h3, h4, h5, h6 HTML heading tags – h1, h2, h3, h4, h5, h6

The first content tag we will teach you is the heading tag. It is a normal practice to put heading on any content we write. Even when you create a webpage and want to add some content to it, you feel the need to put headings for your content. Depending on the type and level of heading, you will have to choose a different tag in HTML.

HTML provides you with 6 heading tags to be used for putting headings in your content. These 6 tags are

  1. <h1> - For main heading, has the highest weightage
  2. <h2> - For subheadings, has a weightage less than h1 tag. This is the level 2 heading.
  3. <h3> - Has weightage less than h2 tag. This is the level 3 heading.
  4. <h4> - Has weightage less than h3 tag. This is the level 4 heading.
  5. <h5> - Has weightage less than h4 tag. This is the level 5 heading.
  6. <h6> - Has weightage less than h5 tag. This is the level 6 heading.

All these heading tags come with their default own styles, but you can change their styles as per your needs by setting their style attribute. We will not teach you how to style the heading tags here, we will only show you how these heading tags look like in their default styles. Heading tags are always written inside the <body> section and should never be used outside the <body> section Below is an example to show you how to use heading tags in a webpage.

<html>        
    <head>      
    </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>

 

When you see the output of the above HTML code in the browser this is how it looks

Image
 
See how headings from h1 to h6 are displayed in different sizes in the browser. You can use any number of heading tags in your webpage.

Need Learning Guidence?
Join our Study Groups and get step by step guidence.
Learn HTML and CSS
The goal of creating this study group is to help students who are beginners to HTML and CSS program
7
Members
1
Questions Asked
0
Tasks Added
Learn Website Development
This goal of this study group is to help students learn the basics of website development using HTM
1
Members
0
Questions Asked
0
Tasks Added
Website Development Interview Preparation
This goal of this study group is to help students prepare for their website development interviews.
1
Members
0
Questions Asked
0
Tasks Added
Web Wars 1.0 - Build Your Digital CV
The goal of this study group is to manage all the communication for the 'Web Wars 1.0 - Build Your
110
Members
0
Questions Asked
0
Tasks Added

Quick Links

E-Magazines

@

Total Followers
Study Group Created
Study Group Joined
Following Teacher
Following Organization
Blog Articles Added
Questions Asked
Questions Answered
Jobs Posted
Total Members in Group
Questions asked by members
Tasks added in this Group

Please wait..

Ok

Login to Open ESchool OR Create your account    Login   SignUp