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.
<!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.
<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>
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.
<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.
Was this article helpful?