HTML defines six levels of headings. A heading element implies all the font changes, paragraph breaks before and after, and any white space necessary to render the heading. The heading elements are H1, H2, H3, H4, H5, and H6 with H1 being the highest (or most important) level and H6 the least.
- The <h1>, <h2>, <h3>, <h4>, <h5>, and <h6> elements are used to create headings in descending order of importance
- Avoid skipping heading levels: always start from <h1>, next use <h2>
- You should consider avoiding using <h1> more than once on a page.
Importance of Headings
- HTML headings provide valuable information by highlighting important topics and the structure of the document.
- Don't use headings to make text BIG or bold.
- Use it only for highlighting the heading of your document and to show the document structure.
- As search engines use headings to index the structure and content of your web pages so use it very wisely in your webpage.
- Use <h1> headings as main headings, followed by <h2> headings, then the less important <h3> headings, and so on.
Example Explained
<h1>I'm most important heading</h1>
<h2>I keep 2nd position of importance</h2>
<h3>It's me h3, I'm important to</h3>
<h4>Hello this is h4, less important than h3</h4>
<h5>I'm happy! I'm important than h6</h5>
<h6>I'm least important! but I don't care</h6>
Output
I'm most important heading
I keep 2nd position of importance
It's me h3, I'm important to
Hello this is h4, less important than h3
I'm happy! I'm important than h6
I'm least important! but I don't care
Headings Are Important
Each time you place a heading tag, your web browser built-in style sheets automatically create some empty space before and after each heading.
Search engines use the headings to index the structure and content of your web pages.
It is important to use headings to show the document structure.
Bigger Headings (h1)
Each HTML heading has a default size. However, you can specify the size for any heading with the style attribute, using the CSS font-size property
<body>
<h1 style="font-size:60px;">Heading 1</h1>
</body>
Why we are using html headings?
There are several reasons for which we uses HTML headings, see below points:
- We uses HTML Headings to make a proper hierarchy of HTML document. In simple words heading is used to provide importance to a text about which we are going to describe.
- Heading is the most important text, about which you are describing whole sentence in a document.
- Heading tell search engine, your text in HTML document is what about.
- We don’t use heading to make text or font bold.
- We do not use heading for bigger font.
Extra importance of h tags in seo
After HTML Tutorial when we start SEO Tutorial then we will understand why heading is a most important element in HTML document as SEO point of view. Actually search engines algorithms are design in such a way, they looks for heading and give them more important to create ranking of your web page world-wide. Heading makes your HTML document more understandable by search engine so that if someone is searching regarding your web page content, if there is heading in your web page then search engine will understand immediately and give result of your web-page in search query."
HTML Heading Details
According to importance level of heading, in HTML there are 6 types of heading and these level are created by providing a number from 1,2.. to 6 follows to <h> element for example <h1>, <h2>,..
- HTML heading importance is decreasing in order of h1,h2,..
- h1 is the most important heading in HTML document, so always try to write most important heading of your web page in <h1> tag
- H6 is the least important heading in HTML document, it used rarely.
- In terms of font-size, it’s decreasing towards h1 to h6, i.e. h1 is biggest and h6 is smallest in font-size.
- The search engine provides more important to h1 heading and least to h6
- headings in HTML creates a space from all sides, to manage this space we use style attribute of heading, and manage it by providing padding value. Don’t worry about it we will learn in a grate way in CSS Tutorial.
- By default h element in HTML document take width 100%.
USE of Attributes with HTML Headings
We can use several attributes to modify HTML Heading element. Basically we uses style attribute to change looks of a HTML heading like text colour, padding, margin etc. Not only style there are so many attributes which can be used to modify HTML Heading like Title, Id, Class, Align, Lang and much more.
Let’s take a example how we can use attributes to modify HTML Heading in a proper way according to need.
Example
<h4 style="color:green;" id="my_head">This is heading with attributes</h4>
Output
This is heading with attributes
In this way we can use attributes with HTML Heading, but keep one thing in mind it always depends on us how to use attribute accroding needs, there are no fixed rules to use attributes so you have to use your own thinking and own Intelligence for efficient use. This was all about to HTML Headings.
HTML Heading Tag Reference
| Tag |
Description |
| <head> |
A Container for all the head elements (title, scripts, style & meta information) |
| <h1> to <h6> |
Defines HTML headings |
| <hr> |
Defines a thematic change in the content |