HTML Headings
HTML Headings are the tags defined with <h1> to <h6>
<h1> tag is the main tag which defines the important heading of the webpage, and like same least important headings are <h2>, <h3>, <h4>, <h5> and <h6>
Types of HTML Headings
HTML provides you 6 level headings. They are used to define topics and subtopics respectively.
<h1>
This is the most important heading tag. It is used to define the main heading of the article. You should use it only once in the entire document. Search engine crawlers find out from this tag what an article is about. And its by default font size is 32 px.
<h2>
This is a subheading tag. Through this you define subheadings. You can divide a large section into several sections by this tag. Its by default font size is 24px.
<h3>
This is a minor heading tag. Through this heading, you can also represent subtopics by defining them in many minor topics. Its by default font size is 18.72px.
<h4>
This is the heading tag of the fourth level, so you can divide the content into sections at a deeper level. Its by default font size is 16px.
<h5>
This is the fifth level heading tag and also you define headings. But it is used to define the content at the deep level. Its by default font size is 13.28px.
<h6>
This is the sixth level heading tag, also you can define heading. This heading is very close to the normal text. With this, you can present many topics in the form of a list. Its by default font size is 12px.
H1 to H6 Heading font size
| S No. | HTML element | Example text | Default CSS | Pixel height |
|---|---|---|---|---|
| 1 | <h1> </h1> | h1 | font-size: 2em | 32px |
| 2 | <h2> </h2> | h2 | font-size: 1.5em | 24px |
| 3 | <h3> </h3> | h3 | font-size: 1.17em | 18.72px |
| 4 | <h4> </h4> | h4 | font-size: 1em | 16px |
| 5 | <h5> </h5> | h5 | font-size: 0.83em | 13.28px |
| 6 | <h6> </h6> | h6 | font-size: 0.75em | 12px |
So these are the heading tags from H1 to H6 with the by default font-size in html.
We can also set the font-size of any of the html tags according to our need, like to add any custom font-size, we need to add the style attribute using the CSS font-size property.
<h1 style=”font-size:60px;”> Heading 1 </h1>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>Whenever a user reads an article, first of all he sees all the headings once and then starts reading the article. Such a reader does this to check whether the information he is looking for is in that article or not.
Whenever you define a heading in HTML, space (line break) is automatically added before and after it. This helps the headings to look unique and the attention of the user goes to them quickly.
Search engines use the headings of an article to structure and index that article. That’s why you must use headings in your webpages.
