You should be (over-) using the H (heading) tags.
Heading tags (h1, h2, h3, h4, h5, h6) have always had a bad reputation in web designing. The main reason for this is the beastly appearance these tags when they have their default styling. Many a time web designers have thrown the H1 tag out for the use of a H4 one just because the latter has a smaller font size. The H tags are, however, core elements of page building and SHOULD be used and even overused.
The ugliness can be put aside as all this can be styled (as they have always been) with cascading style sheets (CSS).
Semantic web and standards.
With the advent of standards, web designers have understood that clean semantic code is what must be produced be it for maintainability, load time or cross browser compatiblity. Heading tags are part of this semantic code as they are here to structure a page. Their mark-up has been created to give the maximum structuring possibilities to pages. Some tips on their usage:
- The top level heading (bearing the title or theme of a page) should always be a H1.
- There can be only one H1 in the entire page.
- Use heading tags logically, there cannot be suh-headings (H2/H3/…) before a H1.
Search engine optimisation.
In semantic web, headings bear the “titles” of pages and sections. These are therefore important information that a page is giving out to its visitors. Search engine robots have algorithms that take this into consideration. Heading tags are thus analysed by these robots and keywords included in titles are given more weight (this is not an incentive to go for keyword stuffing in headings). Using headings is therefore a good way of working on a page’s ranking.
Another interesting angle on headings and search engine optimisation is the fact that links are allowed in headings. Using headings and keywords along with links result in good optimised anchor text for any page. This can be taken into consideration when working on onsite deeplinking and SEO strategies. The current trend is to put a site’s logo and link in the H1 tag. This does not bring much in terms of SEO as it would do by optimising a page on its own theme and content.
Heading tags and usability.
Nobody likes to read huge boring text blocks on screen. The boredom is usually accentuated by the monotonous looks of long texts. Adding headings reduces this in the first place. Second, headings will allow a visitor to quickly scan a page and the different themes or points the page holds on a particular subject. This comes as a usability tool in this case.
Let’s talks about this…
Headings have a lot of advantages and are here to help web designers improve their code, its structure, usability as well as SEO. So why are they still not being used as such? Try some of the premium WordPress theme sites and check the code on some of their live demos, the designs are great but the code rarely makes good use of the headings.
About the Author:
Sachin D. Brojmohun has extensive experience in terms of graphic design, CSS integration, usability and accessibility as well as in SEO. More about him and the Web Design Bureau of Mauritius here: Web Design Mauritius.
Twitter: samudary
says:
I think there are some designers who are still not embracing the power of css and its ability to manipulate the look and feel of any site. So for a designer to still dismiss the use of H tags they obviously don’t know about the power of css. I may be wrong.
It may also mean that the web design community is not entirely embracing the changes that have taken place, especially when it comes to SEO. I want to give my designs the best chance for better SERP rankings so I had begun using H tags more. Maybe many web designers are just not convinced that these are important for better SERP rankings.
Twitter: sachindb
says:
One of the huge problems we have here is documentation and more important the power to change. Some people learn how to build sites in a certain way and will not really upgrade their knowledge to new techniques. Headings are great tools for SEO and, as you said, the power of CSS turns them into great design elements.
You’re not wrong at all in saying that a modern web designer dismissing headings is one who does not know anything about CSS.
Just wondering, the tag < big > is it SEO friendly? I see some people using this to use a bigger font.
Kurt´s last blog ..5 tips for a busy blogger
Twitter: sachindb
says:
Hi Kurt,
the <big> tag (as well as <small>, <i>,<b>,<tt>) are not deprecated. They will validate on the W3C without any problem. It is however better to use CSS to get better effects and using standardised elements such as the headings or <strong> tags keep you on the semantic side maximising SEO.
If we dive more into the standardisation of HTML tags, it will be logical that the <big> tag will be SEO friendly in the same way as a <strong> or <em> tag will be but not as heavy as a H tag will.
Web Design Mauritius´s last blog ..Dropping unnecessary tags in your HTML code.
Your right about how search engines look at H1, H2, H3 ,H4 etc tags as a more important part of the article. In fact they take those and build their search querys around these. For example Google would take this article (if it wasn’t SEO with meta tags) and would automatically pick out key headings and make a search result with that.
Twitter: sachindb
says:
Yes Noah, semantically, search engine robots would analyse these tags as the most important points of the page and use the keywords as building blocks for ranking on these.
Thanks for stopping by.
Web Design Mauritius recently wrote: Search Engine Optimisation (SEO) for “coming soon” pages.
good info
Twitter: sachindb
says:
Thanks for reading Larissa.