Web4College

HTML Headings

  • h1 to h6 tags are used to define different types of headings (<h1> to </h6>).

  • There are six types of headings from h1 to 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
Try it
<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>

Why are Headings so important?

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

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

Example
Try it
<section>
 <h1>website</h1>
 <p>Here, the description about the website should be written such as it is a combination of webpages.</p>
 </section>

Headings order

Least important heading (small font) should not have a 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 descendant of a big size heading in a page or <section> element.

Example
Try it
<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>

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