Demystify the H1 tag

Posted by Rob on 14 Jun 2008 in Web Design | Permalink

The W3 specifications give a description of a HTML heading as “A heading element briefly describes the topic of the section it introduces”. Furthermore the W3C describe the correct use of the H1 element as “the first-level heading of a document”.

With these facts in mind the use of the H1 tag by some web designers is either totally ignored or used in a different context to what it was originally meant for.

Used as the container for the site logo or header

On many sites you"ll see a H1 tag being used to as a container for the logo or header graphic. Whether this is actually a good idea is still open to debate, but unless you have dynamically generated ALT or TITLE attributes the top level page heading will the the same on every page - that just doesn’t make sense to me, especially as the H1 tag is supposed to “describe the current page”.

Used as “large text”

HTML headings, by default, render to larger text sizes than ordinary text and I’ve seen HTML heading tags used simply because the web designer wanted “big text”. This is semantically wrong and really just a sign of someone being lazy rather than do it the proper way or specifying an appropriate text size using CSS.

No heading tags at all

I quite often review web sites on web design forums, to quote for a rebuild, improve search engine visibility or improve accessibility, and I’m still amazed by the amount of web designers who don’t used correct heading structures in their pages.

How should H1 be used correctly?

To quote the W3C…

In this first example it would be a description of the actual page or article…

If the document is basically stand-alone, for example Things to See and Do in Geneva, the top-level heading is probably the same as the title.

In this second example it would be a description of the section of the site being viewed, and the method currently used on these blog pages (I use a H2 for the article title)…

If it is part of a collection, for example a section on Dogs in a collection of pages about pets, then the top level heading should assume a certain amount of context; just write Dogs while the title should work in any context: Dogs - Your Guide to Pets.

Simply using a H1 tag for your logo or header is not the right way to go since it will rarely reflect individual site sections or pages, but whichever method you use, you should try to be consistent across the site.