This is a basic tutorial on how to use heading tags on your website. It’s basic, because its use is very basic. The reason I am posting this article  though, is because it has become apparent to me that many web developers, or site owners have no clue on how to use it correctly, see my reasoning why. To top it off, it can often be difficult to position. You should be able to come close to doing it right though, and after reading this, you should have a thorough understanding on its purpose.

What Are Header Tags?

Header tags do two things. They outline the sites content, and they define the value of the content below it. To use the tags you simply wrap the content like this:

<h1>Title of Site</h1>

Using my site as an example you can see it in action:

My logo is in the <h1> position. This is not ideal, text is preferred here. To compensate for this I have made sure the image has a title. Most data extractors will recognize this. So in this particular case my <h1> tag will reflect “Best Web Image – Web Usability and Design”, the image title.

The <h2> wraps around the page title, and the <h3> tags wrap around paragraph titles. It’s a simple outline of a sites content created by heading tags. They are used by most major browsers. They have been around since I’ve been building sites, 1996, and probably before that. It’s basic HTML code.

Below is an example that I think will get you motivated in using header tags correctly though.

By using W3C’s Semantic Data Extractor on my Contact Information Post you can see the outline it makes of my page. It does this by grabbing the header tags. You may have to scroll down a little to find the outline on the extractor page.

H1 [Best Web Image - Web Usability and Design] – My sites title

• H2 Contact Information – The Page title
  • H3 Contact Information is Your Reflection – Paragraph title
  • H3 Things to Include on Your Contact Page – Paragraph title
  • H3 Related Posts – Paragraph title after the post
    
  • H3 One Response to Contact Information – Paragraph title for comments of the post
    
  • H3 Leave a Reply  – Paragraph title for contact form on the post
• H2 Improve the Usability and Design of Your Website – Post is over, this is in the footer starting new content
  

You can easily see how the content is nicely organized for search engines. It also is now nicely organized for the visitors. On every page of my site, headings are defined the same way. Visitors can then quickly recognized the level of importance by simply seeing the size difference. This improves scanning, consistency, and a visitors ability to use your site faster.

SEO Land

Now here is a crazy part about heading tags, and I think it’s why so many mess it up. A couple of years ago wild rumors were going around that if you put your important keywords between <h2> tags Google will give them more value. Web developers were suddenly using <h2> tags everywhere. They didn’t know how to use them, they just new Google liked them.

Well the rumors were partially true. The reason Google, and other data mining applications, like the <h2> tag is because of what it represents. If used correctly, it often represents the page title. Obviously a page title is a good indication of its content.

What does your site outline look like when you go straight to a <h2>, and skip using the <h1> tag all together? Well, if you didn’t use an <h1> tag, you don’t have an outline, and data extractors will reflect this. Even if Google gives you a little more credit for that <h2>tag it found, your missing out on the most important keywords, the ones hidden in your sites title, aka <h1>. A <h2>tag is great, but is still bows to the king, <h1>.

How valuable is your content if you just wrapped it all in <h1> or <h2> tags? Well all things being equal, nothing will have an increased value unless it was highlighted somehow. If everything is special, nothing is special.

Time to Test and Improve Your Site

So are you ready to test your site out? Visit W3C’s Semantic Data Extractor, and type in your url. If the extractor fails to show your sites outline, time to get to work. Don’t worry if you do fail though, I’m guessing 90% of you will. Just use the information, fix your site, and get a head start on your competition.

Did you get an outline for your site using the extractor? Sweet! You are are the only one out of ten that do!

Like this post? Get more website tips delivered straight to you by email. Full feed artiles are delivered, and are managed by Google's Feedburner service.

15 Comments - Post Yours