HTML h1-h6 tags

h1 to h6 tags are used to define different types of headings (<h1>-</h6>).
The most important heading is h1. It means it has big font-size.
The importance of heading decreases from h1 to h6.
h6 defines least important heading. It means it has small font-size.

Example

<!DOCTYPE html> 
<html>
 <body>
    <h1>This is the most important Heading.</h1>
    <h2>This is the least important than Heading1</h2>
    <h3>This is the least important than Heading2</h3>
    <h4>This Heading has ranking 4.</h4>
    <h5>This Heading has ranking 5.</h5>
    <h6>This Heading has ranking 6.</h6>
 </body>
</html>

Why Headings are so important?

h1 represents explicitly the title of a page. The heading1 (<h1>) is the most important.

Headings may be used in other elements. In <section> element, we write these headings to explain different topics in a page.

Example

<main>
 <section>
  <h1>website</h1>
  <p>Here, the description about the website should be written such as it is a combination of webpages.</p>
 </section>
 <section>
  <h1>browser</h1>
  <p>A browser is a software for retrieving, presenting and traversing the information on the world wide web.</p>
 </section>
</main>

Headings order:

Least important heading (small font) should not have most important heading (big font) as a child in a block of content such as <section> element.

We should always have small size heading as a descendent of a big size heading in a page or <section> element.

Example

<section>
 <h2>website</h2>
 <p>Here, the description about the website should be written such as it is a combination of webpages.</p>
 <h1>webpage</h1>
 <p>the basic structure of webpage is made using html.</p>
</section>

<p>Note: <h1> should not be a child of <h2>.</p>

In the above example h1 is being used as the child of h2 in a section element which is wrong.

Next Previous