The H-group tags in HTML ( from H1 to H6) are used to define headings, subheadings and taglines of a HTML document.
Proper use of H tags are very important for a blog SEO ( Search Engine Optimization – An approach to produce search engine friendly webpages ).
For reader point of view, it does not make big difference but it does matter a lot to Search Engines. When a Search engine bot like (Google or Yahoo) crawls your websites it looks for H1 tag to get the information about the title or heading of the content. That’s why the main keywords should be concentrated inside the H1( between <h1> and </h1>) tag to convey the key purpose of any page in your website.
H group tags used in HTML 5 are – H1, H2, H3, H4, H5 and H6. These six tags are mostly understandable by modern browsers. Generally, these six tags are used in hierarchical order from top to bottom of a page.That means, H1 tag and H6 tags should be used on top and bottom of a HTML document, respectively.
Rule for H-group tagging in blog post :
1. There should be only one H1 tag in a page.
2. You can use zero or more H2 tags.
3. The H1 should be used on top of page above H2 tags.
4. Use most relevant keyword in H1 tag followed by less relevant keyword in H2, H3, H4, H5 and H6 tag respectively.
5. Heading should be written in H1 tags .H2 to H6 tags can be used to give subheadings.
6. Content inside H-group tags should be relevant with your page.
Learn more : How to use <hgroup> tags
For Bloggers (like WordPress, Blogspot, etc, users) it is wise to check, how H tags are configured in their theme. A poorly configured theme does not give much importance to it and it might result in poor SEO.
You can check you themes’s SEO score using “ SEO Doctor” Firefox add-on. If there’s any H-group tagging issue or more in your page, SEO Doctor will sort it out.
In many themes, H1 tags display very big or small font size in heading of a post which irritates the reader. You can manually configure the font size in H-group tags with little editing CSS file of your theme.
For example:
<style type=”text/css”>
h1 {
font-size: 12px;
color: #009BC2;
font-weight: bold;
margin-top: 0px;
margin-bottom: 3px;
}
h2 {
font-size: 10px;
color: #3D3D3D;
font-weight: bold;
margin-top: 0px;
margin-bottom: 3px;
}
</style>
Like in the above example you can adjust the font size of every H-group tags without affecting SEO and page appearance for it’s readers.