1. What are HTML Headings?
HTML heading is a way to style and structure the content of your web-page. Anyone will differentiate different sections on your web-page only if we design the page properly using headings and paragraphs. To design an beautiful, meaningful and easy to differentiate sections of a web page, we need to code our markup wisely. Best practices are the use of proper headings. Whenever there is a need of a new section, initiate it properly with some suitable heading. It will not only differentiate it but also provide extra information about the section. Therefore we should make practice by choosing best heading for each section which will also be encouraged by the users. Following is the list of headings.
Headings divide sections and every heading has its own importance.
Example
<h1>Google</h1> <!--level 1--> <h2>Youtube</h2> <!--level 2--> <h3>Faceook</h3> <!--level 3--> <h4>Baidu</h4> <!--level 4--> <h5>Twitter</h5> <!--level 5--> <h6>Instagram</h6> <!--level 6-->
Output
Google -- h1
Youtube -- h2
Facebook -- h3
Baidu -- h4
Twitter -- h5
Instagram -- h6
2. Types of HTML Headings
Firstly there are 6 different headings, each having its own priority and prominence. <h1> is most prominent and important to the users as well as for google. <h6> is the least prominent heading. Headings are actually html elements comprising of starting and ending tags that style the web-page beautifully and efficiently.
Note:
Since you have seen that, h1 heading is biggest and boldest while h6 heading is smallest and least bold. So, headings also makes the text bold according to its level.
Also, do not use headings to make text bolder or bigger, it will have negative impact on Seo of your blog.
3. Default Formatting of HTML Headings
Secondly each heading has its own predefined styling, which will depicts its prominence clearly to the front-end user. Also it is good practice to use different headings to make your content unique. Also space above and below of any heading is automatically added by default.
Note:
Google also uses the headings to index the content of web-page correctly according to its prominence. So be careful while choosing the heading for a section.
Similarly HTML headings possess a default font-size, which however you may change by adding some css. This is done by adding a style attribute within the heading tag, see more about HTML Tags and their usability. It just only incorporate the changing of text formatting by the help of css. To understand this just see the following code.
Example
<h1 style="font-size:100px;">Google is No 1</h1> <h2 style="font-size:80px;">Youtube is No 2</h2> <h3 style="font-size:65px;">Facebook is No 3</h3> <h4 style="font-size:50px;">Baidu is No 4</h4> <h5 style="font-size:35px;">Twitter in No 5</h5> <h6 style="font-size:25px;">Instagram in No 6</h6>
As you can see in the above example, the font-size property of each heading is changed from its default value by using the style attribute. Also you can incorporate the styles regarding headings in the head section of the markup.
Note:
Since you have seen the importance and usability of HTML headings, you can visit HTML Tags and HTML Elements to understand more about the markup basics.