Christian Ziebarth

Six Levels of Headers

In Uncategorized on March 23, 2009 at 1:07 pm

Had just started this entry on how I use HTML headers when I came across this site called The H1 Debate. It posits the question, “Should H1’s be used for a company logo or a page title?”

My belief is that the H1 should be the most important bit of information about the whole site, in other words, the string of text that names the entire site, while the H2 is the next most important header (obviously) and in most instances, though not all, would be the page title for any page of a site other than the front page. On this blog here the H1 throughout the entire site is “CMZ Media Developer.” The H2 is the title for each individual entry. When you are only looking at one entry there is only the one H2 on the page (unless you put an H2 within an entry, which you shouldn’t be doing as any header within an entry would be subservient to the H2) but in some cases, such as on the front page, there is going to be multiple H2 instances.

There’s going to be some differences from site to site since every site has different kinds of information but let me go through a couple examples from sites I have worked on to show how I have implemented headers.

Example 1 – TCC Notary

On the TCC Notary website every page has an H1 of “TCC Notary” while the H2 serves as the title for each page (there is a slight exception where “Contact Us” is an H2 on the home page). To remove “TCC Notary” from the H1 and put the page title there instead would, in my mind, disassociate the page from the site it’s part of.

One might ask, “Couldn’t you make the H1 for the subpages of the TCC Notary site something like, ‘TCC Notary – Download Forms’?” Yes, you probably could but I have just tested and found that Googling, “tcc notary download forms” brings up the TCC Notary – Download Forms page (http://www.tccnotary.com/downloadforms.php) as the number one result so no harm is done by having “TCC Notary” and “Download Forms” as the H1 and the H2, respectively.

Of course, one trick I have used on this site is to have PHP create the titles for each page by blending the H1 and the H2 together with a hyphen in between them. (The front page is a slight exception by being given the title of “TCC Notary – Home Page,” rather than just “TCC Notary.”)

This blending is done by the following PHP code being placed on each page (using the “Download Forms” page as an example):

  1. <?php
  2. $page_title = ‘Download Forms’;
  3. ?>

And the following as the content of the TITLE tag in the header.php include file:

  1. TCC Notary – <?php echo $page_title; ?>

Example 2 – OC Mex Blog

This next example is what this entry was originally going to be solely about, hence the title. In reading many web dev articles it seems that web developers don’t think there’s any use for header tags beyond level three or four.

On my Orange County Mexican Restaurants blog the Blogger tool automatically makes the title of the blog the H1 on every single page of the site (which I agree with), the date of the entry as the H2, and the title of the entry as the H3. I’m not sure I like that arrangement for the H2 and the H3 but I haven’t disliked it enough to attempt to alter it (Update from April 24, 2013: the new HTML5 TIME element might now be better for the date and time stamp).

Beyond that you can add more levels of headers. A number of my entries have level four headers but one entry (Salad Wars) also utilizes level five and six headers.

This entry informs people on the different Mexican-related salads that are available at fast food restaurants in Orange County. An H4 is used to name each restaurant, an H5 names the salad (some restaurants have more than one Mexican-related salad), while the H6 gives the price. Each header type has its own styling applied through CSS and the H2H4 headers also have sIFR effects added.

Here’s a screen capture of part of this entry with X-Ray turned on (and sIFR turned off):

The blog template used here does the same PHP trick where it blends the H1 and H3 together although I have tinkered with the code so that in this case the H3 is listed in the custom-made title before the H1 is. I did this because if somebody knows the name of the restaurant they are searching for then that bit of information is going to be more important than the title of my blog. (I have also just noticed that this CMZ Media Developer blog automatically creates a TITLE tag for an individual entry page that starts with the H2 content then adds the H1 content.)

H4 Side Note

An interesting point I should add is that a few months ago I had a particular entry on my OC Mexican blog with some text as the H4 content. I checked it on Google and saw that, to Google at least, my text enclosed in H4 tags was absolutely invisible. It may as well have not been there on the page at all. I then made a comment about this at somebody else’s web dev blog (I have no idea which one any more), something to the effect that Google should recognize more than just the first three levels of HTML headers. About a month later I checked again and now Google could see the H4 text. Did it have anything to do with the comment I had made? Hard to say. All I know is something changed . . . and changed for the better.

Back to the Question

Returning to the question of, “Should H1’s be used for a company logo or a page title?” I think I would say that I would have a hard time picking one over the other though I would lean more towards “use it for the company name/logo and use PHP (or your scripting language of choice) to create a TITLE tag for the page that blends the H1 and the H2.”

I would also like to hear thoughts on how image replacement techniques affect SEO.

Addendum

The H1 “Debate” seems to be continuing at a couple different sites (such as here and here). What I see a lot of (though it’s not everyone) is people hoping to game the search engine system while not knowing how to give the proper structure to their HTML documents. I have demonstrated above though that properly structuring your documents does not harm SEO and that there’s more to the issue than just what you put in your H1 tags.

All comments are screened for appropriateness. Commenting is a privilege, not a right. Good comments will be cherished, bad comments will be deleted.