The title of your site is a fairly important aspect of any site and in most cases appears on every page. But just what is the correct tag to use to display your site's title? We, of course, have the <title> tag but this doesn't actually appear in the body of your page, but rather at the top of your window.
A lot of sites, use the h1 to display the site's title because it is the first heading that appears on the page. Some notable sites that follow this practice include:
- CSS Play
- A List Apart (they use an image but it's still in a h1 tag)
- Zeldman.com
- CSS Zen Garden
- Veerle's Blog
- Max Design
During a discussion on Sitepoint, some posters commented that the page title, in other words the title of what each individual page is about, should be the most important heading on the page. If you think about a printed book, although each page might have the book's title at the top in a header or at the bottom in the footer, the chapter or section title will be the largest, most prominent heading on the page.
Possible solutions
But the problem is not so straightforward with regards correct semantic markup. You might think that if the page title is more important than the site title that it should have a higher hx tag (e.g. page title - h1; site title - h2) except that the title of a site quite often appears as the first on the page and from a correct markup perspective (and according to WCAG), heading tags must appear in sequence on a page which means a h1 must always precede a h2.
One solution would be to have your site title appear further down the page and use CSS to position it at the top of the page (if the design requires it) which means you could then use a lesser hx tag, but this is not always possible or appropriate and may not make the most sense from an SEO point of view either particularly if your site title contains keywords for which you hope search engines to find your pages.
Another solution suggested by some of the posters at Sitepoint was that you use a h1 for your page title and use something else for the site title. Unfortunately, the only other suitable tag to use in this case is the semantically neutral div. The argument is that it is better to use a semantically neutral element rather than one that is wrong. So in this case, that would rule out <p> or a list or any other tag. The only tags that are appropriate that we have available to use are heading tags, but due to the issues raised above, the heading tag is problematic due to the sequence in which it must appear.
Should a site's title be semantically neutral?
Of course, the issue of whether it's wrong to give your site title a larger heading than the page title is open to dispute. While I agree that the page title probably should be more important, I find it hard to give way to the notion that your site title should be displayed in a semantically neutral element. The implication is that the site title itself is semantically neutral, which of course it isn't, but the argument is that div is used either to display semantically neutral content, or, when another more appropriate tag is absent.
Of course, if we had access to a more complete library of tags, this wouldn't be an issue, but as we don't, we're left with a choice between two not-very-ideal alternatives.
There are several notable examples of sites that do use a div for the site title:
so it's obviously not an issue that is that clear cut, with designers opting for both approach.
Multiple H1s
Another interesting approach is used on And All That Malarkey where the site is split into two columns and a h1 is used is at the head of both columns the right column coming first in the source with the page title and the left column coming second with the site title. There is no reason why you shouldn't use two h1 tags as long as the order in which your hx tags appears is logical and having your site split into two distinct columns (and not preceded by a header) seems like a good example of where this would work. All That Malarkey also has the left column coming later in the source so that the site title will appear much further down the page if styles are turned off (and to screen readers) and will also appear that way to search engines but with a name like And All That Malarkey, search engine considerations probably aren't that high for keywords in that title.
As stated earlier, however, this approach will not suit all sites due to the positioning of the content in the source which means in a lot of cases you're left with the slightly 'rock and hard place' situation.
