HTML Heading – H1 to H6 Tags in HTML

Free Web development courses with real-time projects Start Now!!

HTML heading is a basic need to make our web-page attractive and systematic. In order to achieve this, HTML 5 provides six basic headings tags (h1 to h6) that are displayed on the web-page as titles, subtitles or any other relevant details. Let us learn these heading in HTML in details now.

HTML Headings

Importance of HTML Heading

1. In order to attract and engage the users, it is important to drive their attention to the most important domains of the web page. HTML headings highlight these important domains and provide a proper structure to the HTML document.

2. Headings are useful for various such engines, such as Google, to index the layout and content of their web pages.

3. Headings offer an efficient and fast perusal of the web-page, for the users.

4. HTML headings can be nested with other elements and provide a better structure to the HTML document.

5. The purpose of the overall page can be depicted using these headings.

6. Appropriate use of headings make the web more accessible to the disabled users who use screen readers to browse the web. Most sub topics are put under various headings to aid in hierarchical content navigation on the webpage.

7. In addition to their principal functionality of being clickable links, headings also support SEO since search engines may familiarize themselves with the structure and key issues of a webpage based on the latter’s headings. This can enhance the position of the page in the list of search results thus pushing more traffic to the site.

HTML Header Tags

Technology is evolving rapidly!
Stay updated with DataFlair on WhatsApp!!

There are six different heading tags in HTML <h1> to <h6>. The heading defined within <h1> is the most important i.e. larger font-size and font-weight whereas <h6> is the least important i.e. least font-size. The heading tags can be styled using the style attribute and its properties. By default, the CSS styling used for headings by most of the browsers are:

1. H1 tag in HTML

h1 {
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

2. H2 tag in HTML

h2 {
  display: block;
  font-size: 1.5em;
  margin-top: 0.83em;
  margin-bottom: 0.83em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

3. H3 tag in HTML

h3 {
  display: block;
  font-size: 1.17em;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

4. H4 tag in HTML

h4 {
  display: block;
  font-size: 1em;
  margin-top: 1.33em;
  margin-bottom: 1.33em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

5. H5 tag in HTML

h5 {
  display: block;
  font-size: .83em;
  margin-top: 1.67em;
  margin-bottom: 1.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

6. H6 tag in HTML

h6 {
  display: block;
  font-size: .67em;
  margin-top: 2.33em;
  margin-bottom: 2.33em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

These default CSS attributes can be overwritten using the style attribute. Following is the code representing the six HTML headings:

<html> 
<head> 
<title>DataFlair</title> 
</head> 
<body> 
<h1>DataFlair Heading 1</h1>
<h2>DataFlair Heading 2</h2>
<h3>DataFlair Heading 3</h3>
<h4>DataFlair Heading 4</h4>
<h5>DataFlair Heading 5</h5>
<h6>DataFlair Heading 6</h6>
</body> 
</html> 

Output

HTML Header tags

CSS Styling

The heading elements can be styled using CSS using the style attribute. We can set their alignment, font color, font family, etc. Their existing CSS properties can also be overridden as per the developer’s preference.

1. Setting Alignment in HTML

By default, the alignment is set to left. This can be overwritten using the text-align property of style attribute.

<html> 
<head> 
<title>DataFlair</title> 
</head> 
<body> 
<h1 style="text-align: center;">DataFlair Heading 1</h1>
<h2 style="text-align: right;">DataFlair Heading 2</h2>
<h3 style="text-align: left;">DataFlair Heading 3</h3>
<h4 style="text-align: justify;">DataFlair Heading 4</h4>
</body> 
</html> 

Output

HTML headings alignment

2. Setting Background-color property in HTML

<html> 
<head> 
<title>DataFlair</title> 
</head> 
<body> 
<h1 style="background-color: rgb(50, 168, 164);">DataFlair Heading 1</h1>
<h2 style="text-align: right;">DataFlair Heading 2</h2>
</body> 
</html> 

Output

HTML heading styles

3. Setting text-color in HTML

<html> 
<head> 
<title>DataFlair</title> 
</head> 
<body> 
<h1 style="color: rgb(127, 158, 219);">DataFlair Heading 1</h1>
<h2 style="text-align: right;">DataFlair Heading 2</h2>
</body> 
</html> 

Output

HTML heading colors

Other CSS properties can also be set or overwritten using a similar approach.

Nested HTML Heading

We can nest headings with other HTML elements or heading elements themselves in order to show some content under them or provide a structure to the document. Following are some examples of nested HTML heading:

1. Heading Element and Paragraph Element in HTML

<!DOCTYPE html>  
<html>  
<head>  
<title>DataFlair</title>  
</head>  
<body>  
<h1>Welcome to DataFlair </h1>  
<p>Walking with the crowd is good. But performing outstanding in the crowd is what makes you different. This is what DataFlair aims to make its students</p>  
<h2>Vision</h2>  
<p>To provide the best training in latest cutting edge technologies across the globe and help learners carve their career.</p>  
<h3>Mission</h3>  
<p>To provide quality education at an affordable price to help everyone develop their career in the latest technologies. We aim to reach the mass through our unique pedagogy model for Self-paced learning and Instructor-led learning that includes personalized guidance, lifetime course access, 24×7 support, live project, resume and interview preparation and ready to work level learning. We aim to provide real-time technical experience to learners through our expert instructors. We will strive to continuously upgrade our offerings ensuring that we can cover all technologies and courses that are up-to-date with the latest industry needs.</p> 
<br> 
<p>(We can use h1 to h6 tags to use the different sub-heading with their paragraphs if required.)</p>  
</body>  
</html>  

Output

HTML nested headings

2. Headings Nested with headings in HTML

<!DOCTYPE html>  
<html>  
<head>  
<title>DataFlair</title>  
</head>  
<body>  
<h1>Welcome to DataFlair </h1>  
<h2> HTML 5</h2>
<h3> Data Science </h3>
<h4> Big Data </h4>
</body>  
</html> 

Output

Nested HTML heading

Tips while using HTML Heading

  • Use only one <h1> tag in an HTML document, as it gives the overall purpose of the web-page.
  • Do not use headings for setting the font-size or font-weight. Use CSS properties instead i.e. headings should be used as headings only.
  • Browsers automatically set a default margin everytime we use headings. This can be easily overwritten as per the preference.
  • Use the heading levels consecutively i.e. do not jump to h3 after h1.

Summary

Html headings are of great importance in the development of HTML pages. They help in navigation of important topics, section designing and an efficient perusal. We have looked at the basic six HTML heading tags (h1 to h6), their default CSS settings and how to override or set their CSS properties. We’ve also looked at nesting of heading elements in order to achieve a proper and attractive structure for the web-pages.

Hope you liked the article. Do share your feedback in the comment section!!

We work very hard to provide you quality material
Could you take 15 seconds and share your happy experience on Google

courses

DataFlair Team

The DataFlair Team is passionate about delivering top-notch tutorials and resources on programming, Java, Python, C++, DSA, AI, ML, data Science, Android, Flutter, MERN, Web Development, and technology. With expertise in the tech industry, we simplify complex topics to help learners excel. Stay updated with our latest insights.

Leave a Reply

Your email address will not be published. Required fields are marked *