More semantic logos
Does anyone else get that un-easy feeling when marking up a logo like so?
<p><a href=”/index.html”><img src=”mylogo.gif” alt=”My company”/></a></p>
It most commonly sits in the trusty “header” div. Maybe you didn’t even bother with the paragraph element at all and why the hell should you, it’s not a paragraph after all…. perhaps we’re just easing our conscience by wrapping it in something that gives it some vague semantic meaning.
What’s perhaps more frustrating with the above mark-up is that it’ll more than likely sit above almost all other content - we may as well make it an H1. That’s a whole other debate and personally I’m not a fan of the logo playing a semantic part in the site’s layout - if you are, you can stop reading here.
The background image option
Since we have our “header” div spanning the entire top section of the site, we could just code the logo in as a background image. Hey presto we lose the almost meaningless markup above and neatly hide away the logo to presentation layer, it’s only branding after all, right? Problem. The logo’s no longer clickable, and everyone loves a clickable logo, it goes straight back to the home page, a standard convention known and accepted by developers and users globally. Are we willing to sacrifice this? No way. It’s such a fundamental part of what constitutes standard practice on the web that losing this functionality is going to do nothing but annoy the user.
The menu option
So in that “header” section, I bet you’ve got a menu, am I right? Something similar to this:
<div id=”header”>
<p id=”logo”><a href=”/index.html”><img src=”mylogo.gif” alt=”My company”/></a></p>
<ul>
<li><a href=”products.html”>Products</a></li>
<li><a href=”services.html”>Services</a></li>
<li><a href=”aboutus.html”>About Us</a></li>
<li><a href=”contact.html”>Contact</a></li>
</ul>
</div>
Hands up, that’s how most of my headers used to look. Our goal is to place the logo somewhere more useful, more meaningful. Well, we haven’t got a “home” link in our menu so why not place it in there?
<div id=”header”>
<ul>
<li id=”logo”><a href=”index.html”><img src=”mylogo.gif” alt=”Home”/></a></li>
<li><a href=”products.html”>Products</a></li>
<li><a href=”services.html”>Services</a></li>
<li><a href=”aboutus.html”>About Us</a></li>
<li><a href=”contact.html”>Contact</a></li>
</ul>
</div>
The id of “logo” has been passed to the LI element containing the logo image. This would then be positioned absolutely in the “header” to sit wherever it’s required. Of course it the logo’s simply text then you’ll need to set some clever relative unit based padding on your header but it’s nonetheless accomplishable.
There’s a good chance your menu also has a “home” link and you require that both that and the logo should be links - this is where things can get a little bit funky. Try the following mark-up:
<div id=”header”>
<ul>
<li><a href=”index.html”><img id=”logo” src=”mylogo.gif” alt=”My company ”/>Home</a></li>
<li><a href=”products.html”>Products</a></li>
<li><a href=”services.html”>Services</a></li>
<li><a href=”aboutus.html”>About Us</a></li>
<li><a href=”contact.html”>Contact</a></li>
</ul>
</div>
The “logo” id has now been moved on the logo image element, this is positioned absolutely as before. From a content perspective the first link in the list is “My company home”, note that space after “My company” in the logo image alt text, it’s important that it goes in the alt text as opposed to directly after the image element as to not effect the rendering of the first link.
If you now apply a hover state to the A elements you’ll notice a pleasant side-effect. Whatever styling you apply to the hover state of the A element will of course be triggered when you hover over the logo giving the user a clear visual connection between the logo and the “home” link - maybe your “home” link will get a different background colour, maybe your background sprite will move, whatever the hover effect it’ll be kicked off on hovering over the logo.
Check the source of our services page for an example!
James.
December 8th, 2007 at 2:45 pm
Nice solution. I haven’t any criticism
December 8th, 2007 at 5:46 pm
Very elegant.
I’ve seen something similar (using a span instead of an image), but I prefer your solution if we consider the logo is content.
December 8th, 2007 at 6:12 pm
I like this a lot, it’s clever.
December 8th, 2007 at 11:17 pm
Well I always use a H1 for marking up the logo - Its got to be more semantic then putting it in a list. Its the main title of the page!. If you put it in the list sure it keeps it easy but its not part of the navigation (ok the link to the home page is but the main logo isnt). Plus when you dont have stylesheets eg mobile and or problem loading the css the logo/ title has the weight of the H1 rather then just being in a list. Usually my header section is similar to
Home
Nav Items
Then just use image replacement to get the background in the css. Clean and better semantically then having it all in a list lmao
December 8th, 2007 at 11:18 pm
woops cut out my html
December 8th, 2007 at 11:33 pm
Hi Will,
I’ve deliberately avoided the whole H1 for the logo or not argument. The SEO agency we work with advise not to mark the logo up as an H1, but instead the heading for the main content, so we bow to their judgement. From an accessibility standpoint I’m happy with that as the text of the logo will be in the page title. Putting the home link in the menu seems like a very acceptable compromise for me……each to their own though, there’s surely no right or wrong solution
James.
December 9th, 2007 at 4:27 am
An example where this method wouldn’t work so well is if you have both a logo and a title for your site in your header and they’re separate elements. The title might also be an image as well or it could be just plain text and there might be a subheading or slogan too.
While you might still make a case for making the logo part of the nav list because it contains a link, in this situation I believe it would be more closely related to the tile/slogan and so should get a different treatment.
December 9th, 2007 at 5:27 am
I couldn’t understand some parts of this article, but I guess I just need to check some more resources regarding this, because it sounds interesting.
December 9th, 2007 at 8:12 am
Hi John,
In the instance where the logo is followed by a strapline then my treatment of that would depend totally on the content of the strapline. Take http://www.norwichunion.com/ as an example, the strapline “We just make it easier” isn’t particularly valuable content (in my opnion), at least not on every page, I’d probably have tried to write that as a background image with the text in the title for the homepage only. If the strapline is something more substantial then I’d feel a little less uncomfortable with marking it up with a paragraph.
James
December 9th, 2007 at 7:34 pm
That looks pretty good for the typical page markup involving the logo followed by navigation.
December 10th, 2007 at 10:38 am
I like this technique but typically the logo contains the company/site name and In the past I’ve gone for an image inside an h2 before a list item (with h1 for main page title). That said though it’s the ‘home’ link that contains the logo so it’s a really good idea you have. I’m going to put this to use in an upcoming project.
I like to use similar techniques when I mark up hCards in a list item in the footer of a page. Sometimes I’ll position the phone number up by the header and use image replacement, that sort of thing.
Cheers James
December 11th, 2007 at 8:20 pm
Great job, James.
Funny how the simple, logical stuff seems to slip by me. Having the inside the of Home is a genius stroke and one I’ll use in the next project as well.
Thanks!
~Ray
December 11th, 2007 at 8:21 pm
well, as the blog stuff stripped out the html, that post looks kinda funny
‘having the image inside the list for home’ is what I meant
~Ray
December 21st, 2007 at 5:55 am
<h1>My company name - General Info</h1>
<a href=””/”” rel=”nofollow”>Home</a>
<a href=””products.html”” rel=”nofollow”>Products</a>
<a href=””services.html”” rel=”nofollow”>Services</a>
<a href=””aboutus.html”” rel=”nofollow”>About Us</a>
<a href=””contact.html”” rel=”nofollow”>Contact</a>
h1 { width: –0px; height: –0px; background: transparent url(’mylogo.jpg’) no-repeat left top; text-indent: -6000px; (or font-size: 1%; color: #(matching pixel colour); )
Would be the traditional way of doing it, and requires only marking up the #header and h1, rather than an additional and extraneous img. Strange that your SEO ’specialists’ advise not using H1 markup (as an aside, I can vouch that using it has improved our Google SERPs across a number of sites), while recommending you call your index page ‘name.ext’ rather than ‘/’!
Otherwise, I’d swap the h1 tag for an image tag and do it the same way…preserves semantics and doesn’t mess around with a random image. of course, you could use position: absolute to set the logo as a background on the li, z-index fiddle and then use text-indent etc to move the text back to the original location. It’s hacky but works surprisingly well and still lets you drop the img tag.
Cheers,
John
December 21st, 2007 at 9:01 am
Hi John,
Possibly I wasn’t too clear regarding the h1. It’s recommended to have the content of the h1 as unique content for h1 tags across the site. So on your homepage maybe that would be your logo with company name/slogan alt text, however on other pages the h1 should be the main unique content heading rather than the company name…..all in my opinion of course.
James.