The best way to place your logo

HTML & CSS
1

Hi,

What would be the best way to position your logo?

What I usually do is create a div and put it inside like this…

<div id="logo">
<a href="/"><img src="http://yourDomain.com/somefolder/images/logo.jpg"alt="Some Text"></a>
</div>

But lately surfing and looking at other sites I noticed that some of them use an H1 tag and add the logo as the background something like this…

<h1>
<a href="http://www.yourDomain.com/index.html">Some Text Here</a>
</h1>

then indent the text and add the logo as background using CSS, something like this.

h1 a {background: url(“/images/logo.png”); text-indent: -9999px;}

and I was wondering what would be the best way to do this as far as SEO or semantically correct.

I’m just trying to figure the best way.

Thanks a lot.

2

There are different argument for all sorts of methods. The logo is usually not the main heading on the page, so I think there’s an argument for wrapping it in a <p>, with normal text (e.g. <p>My Company</p>) and then absolutely place the logo image over the top of that text. That way, if images are off, the text still appears.

Here’s a example of that:
Header replacement

3

Thanks a lot for your help!

Ok it looks like between the two sample I posted the second is the best way but instead it needs to be wrapped in a p tag then absolutely place the logo image over the top of that text.

Is my first option a NO, NO option?

Thanks for your help

4

Others may disagree about the <p>, but it’s my current preferred option.

Is my first option a NO, NO option?

It’s quite ok, really, and probably the better of your two suggestions. With images off, most browsers will show the alt text instead, which is quite good. (It annoys me that Safari doesn’t show the alt text, TBH, but there you go.

In a way, it could be argues that the logo is pretty much just decoration, so that option is quite feasible, really.

5

Thanks a lot for your help!

6

IMHO. If you lean toward using a P use DIV instead. the BRAND IDENTITY is NOT a paragraph, and shouldn’t be semantically marked as such. ( BTW,its ok to use a DIV A ( without a P, as long as you dont have other block elements inside that DIV…) in other words, direct children of a DIV are all blocks or all inline…)

7

Thanks a lot for your comments!

8

Why not leaving the text out and just put the logo on the page and declaring width and height in the HTML , without wrapping it in a container? The alt-text will take care of people with images off.

9

It’s not a bad solution, but alt text doesn’t display in all browsers, such as Safari.

10

That’s all I did on my bread and butter site. Just wrapped the img in an anchor. Then use the page heading as the h1.

11

Ah, thanks. Being a Windows user I didn’t know that.

12

Yeah, it’s an annoying feature (or lack of it) in Safari. (BTW, you can get Safari for Windows. ;))

13

Only safari not chrome too?

14

I have recently started adopted this technique posted by deathshadow, I think it provides the best of all worlds. Besides that I generally place the site brand in a p element. Its not the main heading, so it shouldn’t be treated as such.

15

Yikes, yeah, Chrome too. Never thought to test that. :frowning:

Yep, that’s the same as what I posted above. Does seem to be the best method, though its one drawback is that the image can’t be transparent.

16

That’s pretty retarded. What does webkit think alt is only for google?