HTML Headings
HTML headings are titles or subtitles that you want to display on a webpage.
HTML headings are defined with the h1
to h6
tags. Each tag represents a different level of content in the document.
In html, h1
tag defines the most important heading and h6
tag defines the least important heading . Also, h1
headings are displayed in largest font, whereas h6
headings are displayed in smallest font.
Example
- <h1>Heading 1<h1>
- <h2>Heading 2<h2>
- <h3>Heading 3<h3>
- <h4>Heading 4<h4>
- <h5>Heading 5<h5>
- <h6>Heading 6<h6>
Output
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Note: Browsers automatically add some margin (white space around heading) before and after a heading.
Headings Are Important
Headings are used by search engines (like google, yahoo, bing and etc) to index the structure and content of your web pages.
Users frequently skim a page based on its headings. It is important to use headings to display the structure of the document. Therefore, while creating the heading should be carefully optimized to increase user engagement.
For main headings, use h1
headings, followed by h2
sub-headings, then the less important h3
sub-subheadings, and so on.
Please keep in mind that HTML headings should only be used for headings. Headings should not be used to make text BIG or BOLD.
Related Links
Bigger Headings
There is a standard size for each HTML heading.
These sizes are fixed and you cannot change them through HTML.
However, we can use CSS to change the size of any HTML heading.
The CSS font-size property can be used to specify the size of any heading using the style
attribute from HTML.
This is the default size of the H1 tag.
This is the modified size of the H1 tag.
Output
This is the default size of the H1 tag.
This is the modified size of the H1 tag.
Related Links