site label
After last week's article on multiple h1 tags I figured it would be nice to follow it up with some more h1 trickery. Another interesting h1-related issue is the markup of the logo/tagline in the site header and whether or when it should be constructed using a h1 tag. Opinions are scattered and often non-existent, so let's try to come up with something useful.
what's that h1 again
The h1 tag is used as the main title for the content of a page. This means that it roughly describes what a user can expect for the contents of the page he is on page, similarly to the page title defined the in head of the html. Structurally you would expect an h1 tag to be the first heading tag in the source, though that is usually not the case. The h1 describes the content, yet most sites start with a site header, making the h1 tag usually appear after the site header and as first heading in the site content.
Almost every page on a site has a main heading, no matter what type of page you can come up with. But there are of course exceptions to each rule.
the homepage
The homepage of a site usually doesn't have a heading. It's a landing page for people visiting your site, containing several content snippets you want to promote and will lead the visitor away from this page, deeper into your site. You could of course use a heading saying "homepage" and place it inside a h1 tag, but this is quite silly (which is exactly why you won't see it too often).
Which of course doesn't mean you shouldn't place a h1 tag on your homepage, as it is still a structurally relevant element. A common solution is to place the logo and tagline inside the h1, but only on the homepage. Which makes sense, as it's the entrance gate of your site (even though we know that many people don't enter your site through the homepage). The h1 tag serves as welcomer, stating the brand name and possible tag line. The visitor will know where he has landed, and will continue from there.
The difficulty lies with getting this implemented, as the logo/tagline are usually placed inside the site header which is often a fixed piece of code that is simply included on each page. So inform your implementors well, as they will have to make an exception for the homepage and generate a slightly altered piece of code there.
the code
<h1 class="siteLabel"> <span class="logo"><img src="..." alt="Brand:" /></span> <span class="tagline">...</span> </h1> The code is quite simple, with one base element grouping the logo and tagline. We use a class="siteLabel" to style it independently of where it is used in the site (and at the same time add some semantic information through the classname). This base element contains a span for the logo and a span for the tagline. A div or p tag can't be used since html doesn't allow such elements within a h1 tag. For that reason, I've added a ":" in the alt of the image as to make sure it works as one single sentence. Small detail which I might write about at a later time.
This of course is the code used on the homepage. On all other pages, you could replace the h1 with with either a div or p tag, depending on what you think makes a line of text an actual paragraph. I myself use a div, but the choice is up to you really.
conclusion
One thing to avoid is to use the h1 tag to group your logo and tagline information on every single page, as it says very little about the content on a page. For the homepage though, it makes sense enough to place your h1 tag in the site header.
That said, I still think this setup has room for improvement, so if you have any good ideas, be sure to share them with me.