HTML Headings | Beginners Guide to HTML Headings

In this Tutorial, we will learn what is HTML headings and how to implement headings on a web page.

The HTML heading tags starting from <h1> to <h6> are used to implement different levels of headings on a web page. They are mainly used to structure the content of a web page. Along with this, they help us in improving the SEO ranking of our website.

Example

<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>

Output

In the above example, we have used HTML headings <h1> to <h6> to add headings of different sizes. Every Heading in HTML has its own importance, <h1> heading tag in HTML represents the most important heading whereas <h6> heading tag represents the least important heading. 

The reason they have different sizes is because of the default browser styles applied to them. But if you want to apply styles according to your preferences then you can do so with the help of CSS.

There is a total of 6 levels of heading available in HTML which represent different levels and importance. The <h1> heading represents the most important heading of your web page, such as the title of your content. Where <h2> to <h3> headings are commonly used for subheadings.

The rest of the headings like <h4> to <h6> can be used to provide a further structure within subheadings.

HTML headings <h1> to <h6> are block-level elements. They take up the full width of the screen. if you try to write multiple headings in a single line, on the screen they will all render in new lines.

Example

<h1>HTML</h1> <h2>Headings</h2> <h3>Guide</h3>

Output

HTML Headings are important for mainly two reasons first, they help us to structure and organize our content, and second, they help us to improve our website’s SEO rankings. A search engine uses headings to understand and index your content in the search results.

Now, Let us understand the importance of Heading Tags through an example.

In the below image, you are seeing a search result that is ranking at the first position in google. This is a search snippet that Google has created for a query. The list you see in this result is basically the <h3> headings that Google has extracted from a web page to create this search snippet.

So now through this example, I am sure you have clearly understood the importance of HTML headings.