Semantic h1 logo link

… I can’t really think of a more descriptive title than that, so it will have to do! Any way… moving on. This is a technique that I use on 95% of web sites that I build, indeed any that have a logo which will be appearing in the header

I think it is safe now to say that logos in headers link back to the homepage. It’s common knowledge. So how do we get our logo in our header, linking back to our homepage in a semantic fashion, without just plonking an image in there, and wrapping it in an a tag? The easiest way to explain will be with an example…

Okay, let’s say we have our logo, it’s called sixshootermedia_logo.png, it sits in our images folder and is 200 pixels wide by 100 pixels tall. Okay.

The first thing I do is to create the html necessary to hold the logo. This is about as semantic as we can get!;

<h1><a href="/home/" title="Take me home!">Six Shooter Media</a></h1>

Nice and simple. Now on to the actual magic; the css. What I do with the css is give the link inside the h1 the exact dimensions of the logo by displaying it in the block format. And then set the logo file as it’s background image. So we have something like this

h1 a {
display:block;
width:200px;
height:100px;
background:url(/images/sixshootermedia_logo.png) no-repeat;
}

Now if you check your site you will notice that your homepage link is sat nicely, with the logo as it’s background, fully visible for all to see. But wait, the actual h1 text is still there, and it’s sat right on top of our logo image, “Sacre Bleu!”
This leads us onto the final spell in our magic trick! Simply add text-indent:-9999px; to your h1 a css style and the actual text itself disappears, leaving the logo in it’s pride of place.

So there you have it! A semantic h1 logo link.

You can actually see this technique live, on this site, right now!



8 Responses to “Semantic h1 logo link”

  1. Luke Says:

    Good but doesnt everybody already know this?
  2. admin Says:

    I highly doubt that “everybody” knows this… but the majority… yes. I didn’t say it was anything new!
  3. Luke Smith Says:

    (Not the Luke above!)
    I use this technique all the time and find it very useful.

    One small thing you will notice is that when you click you link above the link highlight border disappears off the left hand side of the page (by -9999px). To avoid this ugly behaviour add:

    overflow: hidden

    to the style properties. This means the link highly border added by the browser when clicked will only surround the 200px by 100px area you defined.
  4. Dadadaddyo Says:

    I for one did not know this (so perhaps *now* everyone knows (}:) I liked the way you explained it, especially when you referred to it as a “magic trick”. I have long held that coding is the only true magic — the only way that you can say (or type) special words from a special language and make something appear out of nothing, even if that something exist only on a monitor screen! Thanks for the tutorial. I will be checking back, hoping for more.

    (First time I responded I lost connection before I hit submit. Please excuse if this response shows up twice.)
  5. Karl Says:

    I put a Link.

    And the css would be…

    span {display:none;}

    and it would hide the text.

    Is that not correct too?
  6. admin Says:

    Yes that’s correct but with this method you don’t need the span.
  7. Andy Says:

    I like this technique and use it myself, however from an accessibility point of view the downside is that anyone browsing with images switched off (and there are still plenty who do) won’t see your h1. If you’re using this technique just for a graphic/logo it’s fine, but when you use it to convey text with an image, it will be lost on anyone viewing without images. Disable images on this site (but leave CSS on, so the text-indent still applies) and you’ll see what I mean.

    Re. Karl’s comment - display:none does hide the text, but it will also hide it from people using screenreading software such as JAWS, which can interpret display:none. I’d argue the content of an h1 tag sholuldn’t be completely hidden, so the text-indent technique explained here is the most accessible.

    Re. Luke’s comment - as a web designer I get many of my solutions and workarounds from other web designer’s blogs, no matter how many times it’s been explained before there’s always new angles and different ways of explaining it - so keep blogging sixshootermedia!
  8. mccormicky Says:

    If everyone said “I shouldn’t bother writing this tutorial because someone else has already written the exact same thing” then there would be 4 tutorials on the internet.
    There really aren’t a lot of easy to follow tutorials like this one and a total newbie who came across this would be successful with it and that is a great thing.

Leave a Reply