Wrapping logo/ image in a <h1> tag

[noeltkelly]

Hi

Forgive me if this is a poor question but........

I'm just wondering whether its a good idea to wrap a logo in a <h1> tag or not and how search engines would react to it.

Thanks,

Noelt

[bbolte]

i don't see it giving any benefit. what are you hoping to accomplish?

[gnarly]

It's no bad thing - as long as you've given the image an appropriate alt attribute.

That said, search engines would probably treat the contents of the <h1> as the most important heading on the page. For everywhere except the front page, that's possibly something you should be saving for the headline on your top bit of content.

[noeltkelly]

Hi Bill,

Saw it mentioned on A List Apart last year (I think). There was also an article on adding your logo as a background image via CSS with your <h1>being a link back to your homepage.

Just wondering which way is most common i.e.

1. Not wrapping your logo in a <h1> tag
2. Wrapping it in a <h1> tag
3. Placing the logo in the background via CSS with the <h1> tag being a link back to your home page
   

Noelt

[Tailslide]

I'd use one of the Image Replacement techniques on this page: http://www.ryznardesign.com/web_codi...ent/index.html

[gnarly]

Wrapping it in a <h1> tag

That one's fine, as long as your logo has the appropriate alt text.

Placing the logo in the background via CSS with the <h1> tag being a link back to your home page

That one's fine too, but your company name (the alt text of your logo) won't be anywhere on the page.

As for the most popular, who knows? It depends on the situation. Personally I'd probably wrap it in an <h1> on the home page, but not on any subsequent pages.

[Dan Schulz]

I use it all the time.

What I do is use the <h1> element (since I use it as the site's title, it only gets used once per document) as the container for the header image, then put the site title as the header text.

Here's an example:

<h1>ABC Widget Company</h1>

Then I add a <span> element just before the header text (won't work in Mac-IE, but then again, why should I cater to a DEAD browser anyway?):

<h1><span></span>ABC Widget Company</h1>

After that, I apply the CSS for the effect. Note that I use the header on EVERY page in the site, since it identifies the Web site's title. Though my methods are a bit... unorthodox...

h1, h1 span {
	background: url('/images/header.jpg') no-repeat;
	height: 165px;
	width: 750px;
}
	h1 span {
		display: block;
		margin-bottom: -165px;
		position: relative;
		z-index: 1;
	}

You'll notice that the header and the span have the same background, height and width properties applied to it. The background declaration simply states which image you're going to use, where it's at and that you do not want it to repeat. The height is the height of the image, same for the width.

The <span> is set to display: block; since you want to convert it to a block-level element. Its bottom margin is set to a negative value equal to the height of the image, and then has its position set to "relative" so you can apply a z-index to it, which will cause the image to stack above the default header text.

This is the same technique described in the Sitepoint article "Accessible Header Images With CSS And XHTML." If you want to read more about it, go here:
http://www.sitepoint.com/article/hea...ages-css-xhtml

[Iimitk]

Here's another useful resource about image replacement techniques:
http://www.stopdesign.com/articles/replace_text/

[noeltkelly]

Hi Dan,

That's a great idea, works very well, covers all the bases !

Much appreciated.

Thanks for the reference simsim

Noelt

[Dan Schulz]

It covers all the bases but one. What if you want a link inside the header?

Paul O'B has a solution to it, but I took one look at the CSS for it this morning and thought it was pretty messy. Granted, he's just as good with CSS as I am (probably even better) but once I have some free time, I'm going to take a stab at re-writing his example.

[Skyblaze]

it is very simple.
You do:

<h1>Text</h1>

and then in the css for the h1 tag you put a background image (your image logo) and a property of : "text-indent: -1000em". That's all.

[noeltkelly]

Hi Dan

It was one of the objectives I was trying to acheive, I done this

<h1 id="imagereplacement"><a href="/test/index.shtml"><span></span>acme.com</a></h1>

with no changes to the CSS the link just sits behind the image.

Am I missing your point here........

Noelt

[Buddy Bradley]

My personal take is that the <h1> should be the main title of the individual page, not the name of the site (i.e. the same on every page).

Just use a plain <img/> for your logo (not image-replaced, as background-images don't get printed) - and with respect to SEO, if you can't manage to place in the SERPs for searches for your own company name you need to try harder.

[noeltkelly]

Thats a good point Buddy........that the <h1> tag should be the page title and as such you have a different top level heading depending on the content of each page.............

so why move away from this with all of the above techniques...........whats the reason behind it..........can anyone shed light on it.........

Noelt

[Dan Schulz]

it is very simple.
You do:

<h1>Text</h1>

and then in the css for the h1 tag you put a background image (your image logo) and a property of : "text-indent: -1000em". That's all.

Try turning off images while still letting the CSS get rendered and you'll see the problem with your technique. If you're going to use CSS based image replacement techniques, they have to be accessible to peopel who, while still having the site's stylesheets applied, have images turned off.

Who in their crazy mind would do something as preposterous as this? DIALUP users. Like me .

[Dan Schulz]

There's a reason why I use the <h1> element as the site title. I use it as a global hook to define the site's header when I style it. Plus, it also defines the site itself for text-baed browsers *cough* Lynx *cough* and screen readers.

As for adding links to CSS based accessible image header replacement, I'm going to give you the link to Paul O'B's page that shows how to do it. I *might* have some free time this weekend, and if I do, I'll try to whip up an improved version of his CSS (giving proper attribution of course) and then share it here.

Here's the link:
http://www.pmob.co.uk/temp/navimagereplace.htm

[Skyblaze]

There's a reason why I use the <h1> element as the site title. I use it as a global hook to define the site's header when I style it. Plus, it also defines the site itself for text-baed browsers *cough* Lynx *cough* and screen readers.

As for adding links to CSS based accessible image header replacement, I'm going to give you the link to Paul O'B's page that shows how to do it. I *might* have some free time this weekend, and if I do, I'll try to whip up an improved version of his CSS (giving proper attribution of course) and then share it here.

Here's the link:
http://www.pmob.co.uk/temp/navimagereplace.htm

wow! that technique is amazing.....i'll use it definetevely! But i don't understand the "hover" image on ems! Where are they? And why if i click with the right mouse button i can't see any "view image"?

[Dan Schulz]

<em> in this case is a replacement for <span>, since Mac-IE (a dead browser that people still seem to use with some regularity) doesn't understand the styles when used with a <span> element in this case.

Paul can tell you more about it.

[Skyblaze]

<em> in this case is a replacement for <span>, since Mac-IE (a dead browser that people still seem to use with some regularity) doesn't understand the styles when used with a <span> element in this case.

Paul can tell you more about it.

it is not that! I can't figure out which are the images! One for the normal vision and one for the "hover". In the css source code i can't see any different image for the hover!

[Dan Schulz]

I see what he did. He used a single image for both states, and then adjusted the position of the image depending on the current state. The top half for normal (and visited) links, and the bottom half for the hover effect.

[elduderino]

Hi,

Yep a single image for both states. The rollover image is hidden outside the ul and the pulled in to position using background-position in the css. It takes a bit of messing around to get the rollover background positioning right, especially if you have different sized link images.

Basically to get round it, if you do happen to have different sized images you have to specify the width of each image and background position properties for each link image seperatley. Its a little heavy on the css but a really good technique all the same.

You can do it with two seperate images but its slow becuase the hover images dont load until you rollover them causing a slight delay when you rollover for the first time

[Buddy Bradley]

It's called CSS Sprites - have a google.

[elduderino]

So it is! Never heard of it before!

you've got to love alistapart:

http://www.alistapart.com/articles/sprites/

[Skyblaze]

I see what he did. He used a single image for both states, and then adjusted the position of the image depending on the current state. The top half for normal (and visited) links, and the bottom half for the hover effect.

What i mean is that i can't see "View background image" when i click with right mouse button in firefox over the image!

[Dan Schulz]

What version of FireFox are you using? (I'll also check the other Gecko-based browsers for you to see if it's not unique to FireFox.)