Proper Hx Heading Use

It used to be that the use of headings played a significant role in the on-page optimization. While the value of on-page headings is probably not what they used to be I still believe they are important enough to put a good amount of consideration into. Aside from SEO, headings can also play an important part in the total usability of your site. I won’t necessarily differentiate the two as I think proper usability usage of headings is also proper SEO usage.

First, let’s make sure we all know what we’re talking about when we discuss headings. In the HTML code, headings are marked by < hx > tags. That’s everything from < h1 > down to < h6 >, with the 1 being the largest/most important.

Heading Organization

Headings should be laid out in a hierarchical structure. If your page content was broken down into an outline, that would give you an idea on how/where to use headings. The < h1 > would be your page topic, < h2 > would be for your points I., II., and III., your < h3 > would be used for sub-points to each of the main points, etc.

< h1 >Page Topic< /h1 >

I. < h2 >First Main Point< /h2 >
    A. < h3 >Sub-Point< /h3 >
       1. < h4 >Sub-Point< /h4 >
      2 . < h4 >Sub-Point< /h4 >
    B. < h3 >Sub-Point< /h3 >
II. < h2 >Second Main Point< /h2 >

Most web pages are not going to need more than one or two headings, so use them sparingly and only as document length and structure require.

Heading Styling

You’ll want to style your headings using CSS rather than letting the browser render them by default. You can style your headings anyway you want in order to fit the overall design of your site. Here is an example of two headings I use on Pole Position Marketing:

The very top one is my < h1 >. Through the style sheet, all my < h1 > headings have the same characteristics:

• font
• size
• checkered flag image
• orange dotted line

This heading I use only one time for each page and I have styled it accordingly. All site pages contain this heading, if no others. Not only does this consistency give the readers an at-a-glance idea of what the page is about, but it also provides a consistency through the site. Such consistency is important for usability.

All other headings on the page, if used at all, should be < h2 > or lower. In the image above I have used my < h2 > directly below my < h1 >. This is just a personal preference and should not be considered as the “correct” way to use headings. In my case I wanted a layout similar to a newspaper with a headline and a sub-headline immediately following. Again, that was just my personal preference, but it works. I have structured all my pages with this consistency.

Just as a side note, and speaking of consistency, I have gone through great pains to ensure that my < h1 > headings never wrap on the page, meaning all the words fit on a single line, and my < h2 > headings always take up two lines. Again, this is just to maintain the consistency through the site and even more importantly, speaks volumes about how anal I can be!

Below that is where the regular text starts for each page.

For my < h3 > and < h4 > headings I have done something completely different.

Since I basically use my < h1 > and < h2 > headings only once each page, all my other headings must be < h3 > and < h4 >. I wanted my < h3 > to stand out more than simple bolded text so using the style sheet I created a background for each one.

Below the bullets you’ll see the < h4 > heading, which is just a glorified bolding. The text is slightly larger so it stands out, but in this case I didn’t want it to stand out too much.

Heading Keywords

The search engines are not the only reason to use keywords in your heading. Since headings draw the eye, its important for your visitors to be able to quickly see what information they can expect to find on the page. If the user did a search for a certain keyword and your visitor finds that keyword on the page, you’ll find that your bounce rates will be decreased and conversions increased.

Don’t worry too much about using keywords in every hading on the page. Some headings should use your page’s primary keywords while others may use supporting keywords and others none at all. You only want to use keywords where they make sense to do so for the content below.

How you implement your headings will be up to you. Style each as you want them to look and to best fit your site’s usability requirements. As for using them on the page, if you keep to a strict hierarchal structure, and keep them limited to what is necessary you’ll not only have a page that is well laid out for your visitors, the conversion process and search engine rankings as well.