May 01 2007 at 2:40pm
What is This Page About? The h1 Tag.
I just came across this The Definitive Guide to Semantic Web Markup for Blogs from Pearsonified. The headline for this article is a little bit misleading because the article is mostly about how we use the h1, h2, h3 tags. Sounds simple, right? Old hat? Maybe not…
Recently there has been a bit of a movement among certain web designers to move the h1 tag up to the site title/logo area. What you’ll do is use some way to hide the actual heading text and put your logo as a background image. I’m currently using a variation of that on this site. On my work site, the h1 tag is the main site title, “Housing and Residences” (that wasn’t my doing, although I admit to overlooking it when I rewrote those templates). In that case the image is hard-coded into the page inside the h1 tags.
But, as the article points out, this isn’t really the best way of using the heading. Although you may think it’s the most important headline of your page, it actually should be secondary to the main article title. The h1 heading should answer the question: What is this page about? This page is not about MeganMcDermott.com, it’s about “What is this page about? The h1 tag”. Therefore, the blog post title (or article title or page title) should be marked up with the h1 tag. Other headings should be marked up according to their relative importance. How important is the overall site title and/or tagline? You might give that a 2. How important are sidebar headings? I’d give them a 3 or even 4 depending on the site.
Heading mark-up is an important factor in SE algorithms but I think it does tend to be overstated by some. The SEOmoz google ranking factors give h1 text a 3.3 rating vs. the 4.9 (out of 5) assigned to the title tag. You could wrap multiple headlines in the h1 tag but then you could be forcing the googlebot to decide which one is the important one. I also suspect that google could/would catch on to over-use of the h1 tag and make adjustments accordingly.
David Zemens May 3rd, 2007 at 4:05 pm
Great article Megan. It was a very interesting read. I had been using the H1 tag for my page header for quite some time. What you write makes perfect sense to me, so I modified my newest site to use a DIV for the header and H1 for the post titles and page titles. Thanks again for getting me thinking…
Megan May 4th, 2007 at 1:44 pm
It does bring up another question as to what to do with the page header in this case. If it’s not the h1, then what is it? The article I linked suggests using h2 instead.
When you think about a regular document, though, that’s not what you would do in a word processor. The h2 is usually a descendent of the h1. If you had a document, like a report or something, how would you structure the header (and footer)? You would just have a header and footer.
I read that they are proposing to develop some new structural tags for HTML 5 that would solve this problem. These would include tags for <header> and <footer>.
The other common practice that I’m starting to question is putting the logo in as an image background. A logo is not just decorative – it does convey information. So then the logo should be an image rather than a CSS background. But we’ve still got the question of whether it should be wrapped in Hx tags or not.
I don’t think it really matters that much, to be honest. Search engines do consider headers to be more important text, but after h1 it’s not as big a factor. Your site title would also be included in the <title> tags and elsewhere on the page as well so you’re probably covered well enough.