H1 Tag as your Logo?
October 18th, 2008, By Anthony
I had an interesting chat whilst working on a design project alongside Mike Jolley the other day, as we was working on Theme Slice a PSD to Wordpress Theme conversion service - sorry had to get that in, our different styles of coding ignited an interesting topic, we both class ourselves as semantic web coding types, but should the H1 tag be used as your logo? - on this conundrum we disagree.
Mike along with most web designers work I view use the H1 tag as the logo, I do not, I often use an anchor with an image within it, and heres why:
Anthony’s Argument
Usually the first heading tag that your web browser and users encounters is the H1 tag and theres one on every page, the H1 tag semantically has the most grunt and is the premier tag you should use for the main heading for that web page.
Notice I said “Web Page”, as this is where the problem with using a H1 tag and putting your logo within it lies. Every page on your website has different content and I believe the H1 tag should support this.
For instance lets say you run a design agency called Dave’s Design and you have a web design services page. To identify to users and to the web browsers a fair reflection of what the content is on that page it makes sense that the main heading (H1) should say “web design services”.
But if the H1 tag was used as a logo, as is often the case, then the web design services pages H1 tag would be Daves Design, actually in this scenario the H1 tag on every page of the Dave’s Design website would be H1, which does not reflect all the different content on each individual web page across the website.
Therefore it is my belief that we should simply use a anchor tag with the logo within that anchor and leave the H1 tag to do its semantic duty as the foremost representative of the web pages content.
Logo’s are always a vector or bitmap image and so I believe semantically should be represented that way, to say that an image is a heading to me just seems plain stupid.
Who won?
In case you was interested to know Mike won the argument in this instance, as Theme Slice is aimed at web designers we have coded in the most popular coding methods, everyone seems to use the H1 tag as a logo, so we followed like sheep, please share your view?
25 comments-
DigiArtBali replied:
thanks for information.. very useful.. thanks for share..
-
Dale replied:
Thanks for the great info.
I did an article recently on h1 tags that you may find useful.
Great work on the site by the way.
-
trCreative Web Design replied:
Interesting subject. From a personal experience I would tend to agree with you (Anthony) on this one.
-
aby replied:
well, the tag should be the first one to show. So people know what kind of site they visit.
-
Website Design Liverpool replied:
I agree with using the h1 tag as both the logo and also as a statement describing the page.
You can have both if you use CSS image replacement.
Just replace your h1 tag with your logo/branding image and then change the h1 text on each page. Best of both worlds.
Is this a solution?
-
Kravvitz replied:
I agree with you, Anthony.
As to having multiple h1 elements… some people and tools might be confused by it.
-
Fuze Design replied:
I agree with you Anthony. Every page on your website has different content and for that reason the H1 tag should support this. Also very important for SEO.
-
Anthony replied:
I am pleased to announce that I won the argument this time and Theme Slice uses an anchor for the logo.
-
Arem replied:
Hm, I like to use the h1 tag for my logo, but I use different text for the logo on each page. I guess that doesn’t work for WordPress pages (which are not individually written), but as a general principle I don’t see anything wrong with it.
-
Ahsan replied:
Excellent suggestion. H1 tags should not be used as logos for the scenarios that you have described.
But it can be used on small websites in which all pages are related to just one product or service. -
Manchester replied:
I guess it depends what your company/website is called and also what keywords you’re aiming for.
Our business website, Enjoy Online, couldn’t possibly use h1 tags as its logo because we’re not aiming to be in the search engines for the term “enjoy online”, we’re aiming for “web design manchester” so we use the h1 tags to highlight that term.
If, however, your company is called “Yellow Socks”* and you’re aiming to be in the search engines with the term “yellow socks”, then by all means use h1 tags for your logo.
*Yellow socks was the first thing that came to mind, don’t ask me why
-
Ann Arbor replied:
If everyone went with the flow, sounds like the whole argument was a waste of time. Its good to experiment maybe u can do that with the next site you design.
-
Isabelle Newton replied:
I agree with Anthony. Although I guess there is no argument (like Arum said) for pages designed in WordPress and the like.
-
Mimi Flynn replied:
I just recently began using h1 tags for the site logo assuming that if a screen reader were to speak the content out loud the logo text would be appropriate before the page’s content header that would have an h2.
-
Dazines replied:
If your logo uses an unusual font then it will need to be added to your site as an image rather than text so you would be best to use an ALT tag. You can save the H1 tag for the heading on the page which makes more logical sense anyway as you will be able to put your keywords in it.
-
web designers replied:
If your logo is good it will probably contain fonts that are not supported by web browsers so you will need to have it as an image and so should use an ALT tag.
-
ITMDesign replied:
H1 should describe the page and not the overall website. H1 is important for SEO, it defines what that particular webpage is about and this should be relevant to the content.
Besides, a lot of websites like to have a flashy logo which better suits an image file rather than plain text in a H1 tag.
-
Andrew replied:
Why do some people wrap H1 around their logo?! Why??!!!
H stands for Headline. It should be used for the unique headline for each unique page.
Wrapping H1 around a logo (that’s the same on every page of course) is as meaningless as giving every page the same HTML TITLE.
-
Rob Chant replied:
I agree with you. I always use the H1 tag as the title of the page.
-
Anthony replied:
I’d just like to put an end to the assumption that Wordpess, Joomla , Drupal etc, all content management systems need to have H1 as he name of the site, This is ust not true, this site is built in wordpress, check out my h1’s. In all these CMS’s a simple conditional statement can provide this functionality.
@Ann “Its good to experiment maybe u can do that with the next site you design.” = Ouch, some one got out of the wrong side of bed!
-
charlotte replied:
great blog it’s good to see someone using a blog for what it is actually meant for look forward to seeing further comments.
-
Patrick replied:
Anthony’s right. H1 should be the page title, always. Think of users with disabilities and screen readers, etc.
-
[…] Web Design Blog » H1 Tag as your Logo? - Designbit. […]
-
Website Design Company Business Web Design Company replied:
Importance of H1 is very high. And all the pages don’t have the same relevance of the keyword which is used (if) in the logo. Most of the sites are now developed using same header and footer where the logo and few things are called from a particular folder.
I think using the h1 tag in the logo is not the best option.
to know more visit http://www.Brandmantra.net
-
Pete Lister replied:
Surely Anthony should have won the Argument as is specific to the unique pages content, aren’t duplicate tags detrimental to SEO. Using this process on a site may create tunnel vision and less traffic from other essential phrases that may become relevant as the site grows.
Anthony Brewitt is a web designer and entrepreneur hailing from Lincolnshire, UK. Specializing in blog design and usability and ranting on about anything design related.