The Logo: To H1 Or Not To H1?
Even though I’ve been working in HTML for over 12 years now, I still have a few philosophical conflicts about certain practice. I call them philosophical, because in the end, it really doesn’t “matter” which way I choose, but because I’m a big proponent of web standards and semantics, it makes a big difference to me.
Using the logo in an H1 tag is one of those things. About a year ago, I was using the logo in a regular <a> tag with a logo class, when someone made a great argument for putting it in an H1 tag instead. The said to think of a website like you would a table of contents in a book. A typical book outline usually goes like:
Title of book > chapter > sub chapters
Considering the fact that HTML was originally meant for outlining books and papers, this made a lot of sense to me. The title of the entire site is what the broadest headline is, so why not make it an H1?
So far awhile now, I’ve been using the logo in an H1 tag. To make it extra semantic and usable, I actually use the logo as a background image and put the actual title of the site in text, while using text-indent to hide it. Those using screen readers, printing the document or with CSS off, would then get the regular text instead of an usuable image.
However, I started hearing recently that Google is adding text-indent to it’s no-no list of black hat techniques. While I seriously doubt this means that it will punish you for using once, it’s again got me thinking – is using the logo in the H1 tag really the best way to go?
So I turned to Twitter…while most of you were convinced that it was the page title that should be an H1, even though it isn’t technically the top-most heading, I still wasn’t satisfied, so I turned to some of our favorite industry experts.
Jeremy Keith, you awesome man you, was the first to reply and in less than 140 characters, convinced me to go back to using the H1 for the page title only:
I consider the title element to be equivalent to h0. Also, SEO and argument are two words that do not belong together.
OK, ok I can deal with that.
It’s these kinds of self-arguments that make you a better developer. Every time you code, try to think of a way you can do something different – do you need to use that class? Can you instead use the cascade? Why do you code that element the way you do? Push, always push, and be better!