HTML Headings

The titles and subtitles of our webpages are known as HTML headings. Let’s not talk about webpages but giving heading to almost everything like normal paragraphs, articles or let it be anything, emphasizes them. A heading is something which is a one-word summary for our whole topic or we can say webpage in html’s case.

In html, we define headings with the <h1> to <h6> tags. Here <h1> defines the most important heading whereas <h6> defines the least important heading among them all. Therefore, h1 being the biggest heading of them all and h6 being the smallest.

While using html, our browsers automatically add some white space or we can say margin to the left and right side of our heading, to distinguish it from the other content. Below is the example that shows the size of headings from <h1> to <h6>, and their white spaces as well.

For example:

<body>
<h1>This is my first heading</h1>
<h2>This is my second heading</h2>
<h3>This is my third heading</h3>
<h4>This is my fourth heading</h4>
<h5>This is my fifth heading</h5>
<h6>This is my sixth heading</h6>
</body>
</html> 

Output:

Importance of headings

Search engines take the help of headings to index the structure and content of our webpage. Users sometimes judge the webpages by their headings only. It is very important to use heading to show the documented structure of our webpage as mentioned before. <h1> heading should always be used for main heading which shows the summary of the written content or we can say it should determine the purpose of webpage followed by <h2> heading and <h3> and then carry on like this to <h6>. Personal advice from our side, that use html headings for headings only do not use them to make your text big or bold.

Bigger headings

Each and every html heading has a different and default size. However, we can change or we can modify their sizes by using style attribute, or by using the CSS font-size property. Below is the example that shows how we can give bigger headings with the help of CSS properties.

For example:

<html>
<body>
<h1 style=”font-size: 60px;”>Heading 1</h1>
<p>This is an example which shows how we can change the size of a heading with the style attribute, using the font size property.</p>
</body>
</html> 

Output: