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.

headings

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!

 

What’s the Most Common Mistake Made?

Before listing off the top ten mistakes I hope you at least understand the most common mistake made. The Improper Use of Header Tags. If you read no further please read this. Heading Tag – A How To. It could substantially improve the usability, design, and SEO of your website.

After doing a ton of my usability and design analyses, I decided to share some of the results with you. The analysis covers thirty-five items total. It covers basic design concepts, known usability techniques, and accessibility issues that can effect your visitors. This list is the top ten items ordered by the worst offenders first. Results are based on the analyses I have done so far in 2009.

1. Improper Use of Header Tags

So the number one mistake I find webmasters making is the improper use of header tags. I can only guess it is the simple fact they do not understand what they are for. Many WYSWYG editors allow you to simply assign a heading with a random heading size, and many webmasters simply select this based on how it looks. I believe they are also influenced by the countless articles implying that by putting your keywords between H2 tags is a good SEO move.

Heading tags indicate the outline of your site. Properly identifying the outline of your site will improve its readability to search engines, and will help clarify content value to the visitor. This is a primary method of establishing a websites structure. About ninety percent of the sites I analyze fail to properly use heading tags!

Here is a simple example on how to use:

<h1>Main Title of Site</h1> – often found in header

<h2>Specific Page Title</h2> – a good reason search engines like h2 tags if done correctly

<h3>Paragraph heading</h3>

<h4>Heading titles to parts of the paragraph</h4>

<h3>Another paragraph heading</h3>

Just think of heading tags as a way to identify an outline.

2. Failing to Validate HTML on W3C

You should validate your site using the rules and standards set by the World Wide Web Consortium, W3C. It helps ensure the widest spectrum of visitors can view your site, and view it they way you expect them to. Too often, extremely embarrassing mistakes have been found on sites because the site owner was unaware how their site appeared on other types of browsers.

There are no said rules that say how you should code a site. As long as it works it works, right? Big mistake. Coding your site with as few errors as possible has many benefits. The simple fact that many web browser developers refer to those standards should be reasoning enough, but if you need more here is a basic one. Validating code makes for an easy error check, even if it is for something as simple as forgetting to close a hyperlink with </a>. Validating code is good for you, the visitor, and search engines trying to figure out your site. More than 90% of the sites I did analyses on failed to validate.

3. Not Having a Search Function

Having a method to search your site is highly recommended when your visitor fails to understand the sites navigation. It can also help find content where normal navigation may be too tedious. The search function should be available from every page, and highly visible. This is additionally becoming an expected function by most web users. You don’t want to disappoint your visitors, do you? Even a simple boolean search will do wonders.

4. Failing to Have a Liquid Layout

Not everyone has the same size monitor. A liquid layout is a site that adjusts automatically to fit any size monitor, and even some PDA devices. The notion of making a site small enough in width to fit older monitors does not work well when viewed on a more modern, larger monitor. Recent studies have found that more than 90% of all web users have monitor property settings set to 1024 in width or greater. This should be an easy fix, and an easy way to keep up with changing technologies.

For those of you that insist on designing 800 pixel wide sites, you can still use percentages and keep that narrow effect. By knowing most people use 1024 settings or greater, simply turn it into a percentage. Don’t say width=800px, say width=78%. This will make a 1024 monitor make your site look 800 pixels wide.

5. Hyperlink Colors Not Changing

Change in hyperlink color after visiting a page is a primary method of navigation for your visitors. Returning visitors can easily track their previous path to a desired destination because they can see where they have been. Over fifty percent of the sites I analyzed fail to recognize this. This should be an easy fix without making your site appearance suffer in any way. You will immediately make your visitors happier with this one. This is a one line CSS fix, “a:visited {color:a_different_color_than_normal_link_color;}”. How hard is that?

6. Linking to the Home Page Poorly

Surprisingly many forget to, or simply do it wrong. Here is the general rule of thumb: Do not include an active link to the homepage on the homepage. This may be over looked if the hyperlink is emphasizing the active link, or if linked by the company logo. Having this link active often generates wasted clicks, and visitors only click so often on average for a particular web site.

After conducting a recent poll, most visitors expect a logo to take you to the home page, even while on the home page.

Additionally, have an easily found link to home page on all other pages. It amazes me on how many people forget to have a link to the home page from other pages! Wow, seems like a no brainer to me.

7. Not Validating CSS

Besides checking for good HTML on a site, I also check to see if their style sheets are valid. The reasoning is the same, and over forty percent of the sites I analyzed failed to validate their CSS. Can you really say your website is done, if you haven’t bothered to check your work yet?

8. Having a Poor Title

On average, search engines grab the first 65 characters of your title. Having a quality title with well-selected keywords will improve your search performance. Also, the title is used when a visitor makes a bookmark, so you should avoid lengthy titles that are not clear from the beginning. Titles reveal what the site is about.

Who knew? I thought the title of a site was where I put the keyword list :0

When giving advice on how to title a web page, I try to get the site owner to visualize their photograph on a book with the title right next to their head. Titles start making sense then, and stop looking so spammy. Here is an article I wrote about titles a while back.

9. Poor Keyword Ranking

When I do an analysis on a site I look at their keywords, and see how they rank. Usually the do not rank in the top thirty. Some common reasons for this is the keywords are too vague, or they are too competitive. Imagine your site is all about money. Would you use a keyword like “Money”? If you did, you are probably wasting your time, and most likely will never rank well with it. Be selective, be extremely niche specific, and pick keywords that people actually may search for. This one is a little easier said than done, but it’s for sure worth the effort to do it right.

10. Fonts Defined by Pixels

Fonts should be sized by relevance, and not by pixels. Use EM or Percentage to specify size. Eyesight begins to degrade for most people over the age of forty, and many adjust font size using their browsers. This is an old favorite of mine, and like the rest of the items I listed above more than forty percent of the websites I analyzed failed to make their fonts adjustable. What amazes me even more is how many sites I found with small text that were clearly made for an older audience. Do not use 8pt on a life insurance or retirement site! I think the only way to sum it up quickly is by saying, know your audience.

Did you know? Firefox users can adjust font size regardless of how a font size has been defined. IE users, sorry. If it’s defined by pixels it stays that size. Web designer using pixels, know that most people still use IE.

That’s It!

That’s it for my top ten website mistakes. All of the items listed above I found occuring over forty percent of the time or greater, so bets are good you can find one or two of them on your own site. I know one of these needs work for this site alone. Your job is never done as a webmaster, though you may think it is.

What did webmasters do well? Two things stuck out, fast loading pages, and a job well done in selecting colors for their sites theme.