Using <h1> tag with images

J

johnnyfox

New Member
Hello,

I am currently building my first page from scratch.

Although I understand the importance of the <h1> tag for SEO/accesibility purposes, there isn't really anywhere on my page to have one (my headline is written in a custom font and insterted as a jpeg)

I'm wondering if there is a legitimate way to either conceal the tag in my page somewhere, or apply it to an image based header instead (i've heard this is possible)

Any help appreciated!

Cheers.
 
L

lolkaykay

New Member
I've never really done this but I think this is how it goes.

Make an h1 tag with your text inside it:

HTML: 
<h1>Welcome to my website!</h1>

Then you set the css for that tag. You want to make the jpeg image the background for the h1 tag and throw the actual h1 text off of the screen using a rediculously large text indent:

Code: 
h1 {
    background: url('yourimage.jpeg') no-repeat;
    width: 100px;
    height: 100px;
    text-indent: -9999px;
}

Make sure you set the width and height to the width and height of your image. Now the user will see the image and not the text, but search engines will still be able to see the text inside the h1 tag. Tell me if it works!
 
PixelPusher

PixelPusher

Super Moderator
Staff member
You can use lolkaykay's method but the only problem there is the text-indent. Having a large text indent will cause the text to essentially disappear, which is fine is you when have an image background there....

...but what happens when a user turns of images? No image, and consequently no text either.

Another method I use a lot is the Gilder/Levin method. It covers both of these bases, by using a empty span tag to hold your image. How it works is it uses positioning to lay a span tag over the top of your text (hiding the text). However, if a user turns of images, the image will disappear and the heading text will be sitting right there for them to see. Win win situation.

Here is the code:

HTML
HTML: 
<h1><span></span>You H1 heading</h1>

CSS
Code: 
h1 {
position:relative;
font:bold 12pt/20pt Arial, Sans-serif;
color:#FF0;
}
h1 span {
background:transparent url(images/yourHeaderImage.png) center no-repeat;
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
}
 
GeneticOpera

GeneticOpera

New Member
You could use the H1 tag around your page titles. <h1><title>Beanies4babies: collecting toys for kids in crisis.</title></h1>
 
PixelPusher

PixelPusher

Super Moderator
Staff member
GeneticOpera said:
You could use the H1 tag around your page titles. <h1><title>Beanies4babies: collecting toys for kids in crisis.</title></h1>
Click to expand...


I don't think this is semantically correct markup. A title tag is the <head> of your page. <h1> tags are content and belong in the <body> of the page.
 
B

bcee

New Member
GeneticOpera said:
It was suggested to me through an accessibility website and one of those How To sites.
Click to expand...

Do you have a link? I'm quite sure that will make your document invalid, if you care.

OP...If you are using large text indents I would check your site in Chrome as I have had problems with 1px text showing up randomly in the past using that method.
 
J

johnnyfox

New Member
Hello everyone,

Thanks for all the helpful replies. Lolkaykay, I do like that method you mentioned and was about to implement it but as Pixelpusher rightly points out, there would be accessiblity issues.

So, I'm going to go away and try the Gilder/Levin method just now and report back with any success/failure.

Thanks again!

J
 
J

johnnyfox

New Member
Hi Pixelpusher, I've just tried the method you mentioned.

It seems to have been mostly successful, appearing fine in DW's design view as well as in IE but surprisingly, not firefox.

Is this a common problem? Or a particular reason why it might be happening?

Cheers
 
PixelPusher

PixelPusher

Super Moderator
Staff member
johnnyfox said:
Hi Pixelpusher, I've just tried the method you mentioned.

It seems to have been mostly successful, appearing fine in DW's design view as well as in IE but surprisingly, not firefox.

Is this a common problem? Or a particular reason why it might be happening?

Cheers
Click to expand...

It should work correctly in all browsers. I use this method on our company website. Do you have a link to the page? or the code I can look at?

Rule of thumb...don't rely on DW's "design view" (one of the few flaws to that app) and dont use IE as your browser testing ground. Use Firefox or Chrome and then check to make sure it also works in IE (opposite of what you're doing now)
 
Last edited:
You must log in or register to reply here.
Top