This will all go in the <body> of your pages. The above is a very basic example of a well structured web document. It usually gets much more complex then that but that you give you the idea of what you’re after.
This what I have on my index page. I have no clue where I can insert a <h> at. Any ideas?.
{Header}
<Title>Passionate Hearts Personals. Your last stop for finding your true love.</Title>
<META Name=“Keywords” Content=" keyword keyword…blah blah">
<META Name=“Description” Content=“Passionate Hearts Personals is your one source for free personals. Here you can post a FREE profile and search for singles across the globe.”>
<META Name=“Author” Content=“David LaFlair”>
<META Name=“Robots” Content=“index,follow”>
<META Name=“Googlebot” Content=“index,follow”>
<!–BeginFormformHeader–>
<!–EndFormformHeader–>
<!–BeginFormform–>
<font face=“Papyrus” color=“#0000FF” size=“2”>Passionate Hearts is your one
source for online dating weather you just want to meet new people or find your
soul mate, the woman or the man of your dreams. Here you can post a <u><b>free
</b></u>profile and
search for singles to try and find that one who makes you feel special.</font>
<TABLE width=“100%” border=“0” cellspacing=“0” cellpadding=“0”>
<TR>
<TD colspan=“2”>
<TABLE width=“432” border=“0” cellspacing=“0” cellpadding=“0” align=“center”>
<TR>
<TD colspan=“3”><IMG src=“images/img_18.jpg” width=432 height=25 alt=“”></TD>
</TR>
<TR>
<TD valign=“top”><IMG src=“images/img_22.jpg” width=12 height=22 alt=“”></TD>
<TD valign=“top” rowspan=“3” align=“left”>
<img border=“0” src=“img_23.jpg” width=“114” height=“113”></TD>
<TD valign=“top” background=“images/img_25.jpg”><IMG src="i
Don’t do that. If a user has images disabled but CSS still turned on it will lead to a much less informative page. Do something like this instead:
<h1><img src=“/images/myheader.jpg” alt=“My Header Graphic” /></h1>
That way, if images are disabled the alt text takes the place of the image, and you still get the bonus of using a header in the search engines.
Or you could use the Phark method, dropping the img src tag and going straight with a h1. For example, this would be in your HTML:
<h1 id=“header”>Header text</h1>
and this in your CSS:
#header {
height: 10px;
text-indent: -5000px; / hides the text /
background: url(/images/myheader.jpg) no-repeat;
}
geof
Your code:
<Title>Passionate Hearts Personals. Your last stop for finding your true love.</Title>
<META Name="Keywords" Content=" keyword keyword...blah blah">
<META Name="Description" Content="Passionate Hearts Personals is your one source for free personals. Here you can post a FREE profile and search for singles across the globe.">
<META Name="Author" Content="David LaFlair">
<META Name="Robots" Content="index,follow">
<META Name="Googlebot" Content="index,follow">
<!--BeginFormformHeader-->
<!--EndFormformHeader-->
<!--BeginFormform-->
<font face="Papyrus" color="#0000FF" size="2">Passionate Hearts is your one
source for online dating weather you just want to meet new people or find your
soul mate, the woman or the man of your dreams. Here you can post a <u><b>free
</b></u>profile and
search for singles to try and find that one who makes you feel special.</font>
<TABLE width="100%" border="0" cellspacing="0" cellpadding="0">
<TR>
<TD colspan="2">
<TABLE width="432" border="0" cellspacing="0" cellpadding="0" align="center">
<TR>
<TD colspan="3"><IMG src="images/img_18.jpg" width=432 height=25 alt=""></TD>
</TR>
<TR>
<TD valign="top"><IMG src="images/img_22.jpg" width=12 height=22 alt=""></TD>
<TD valign="top" rowspan="3" align="left">
<img border="0" src="img_23.jpg" width="114" height="113"></TD>
<TD valign="top" background="images/img_25.jpg"><IMG src="i
Could be cleaned up like this:
<title>Passionate Hearts Personals. Your last stop for finding your true love.</title>
<meta name="keywords" content=" keyword keyword...blah blah">
<meta name="description" content="Passionate Hearts Personals is your one source for free personals. Here you can post a FREE profile and search for singles across the globe.">
<meta name="author" content="David LaFlair">
<meta name="robots" content="index,follow">
<meta name="googlebot" content="index,follow">
<!--BeginFormformHeader-->
<!--EndFormformHeader-->
<!--BeginFormform-->
<h1>Passionate Hearts is your one source for online dating whether you just want to meet new people or find your soul mate, the woman or the man of your dreams. Here you can post a <em>free</em>profile and search for singles to try and find that one who makes you feel special.</h1>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2">
<table width="432" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td colspan="3"><IMG src="images/img_18.jpg" width=432 height=25 alt=""></td>
</tr>
<tr>
<td valign="top"><IMG src="images/img_22.jpg" width=12 height=22 alt=""></td>
<td valign="top" rowspan="3" align="left">
<img border="0" src="img_23.jpg" width="114" height="113"></td>
<td valign="top" background="images/img_25.jpg"><img src="i
Note that I have removed the font tag with the Papyrus reference, a font that many people don’t have installed on their computers. You should be using a CSS page to style your content and this is where you would define what font to use (Verdana, Arial, Georgia, etc.). Also, don’t use <b> or <u> tags. <u> tags end up looking like links when really they’re just underlines. <b> tags are deprecated, try <strong> instead. Finally, if you use a <h1> tag as your header text, you need to highlight free, in which <em>, the successor to <i> for italics, would be a good choice.
On a side note, always use lower case HTML code and do a spell-check on your text. In that first paragraph alone there are a number of grammatical and spelling mistakes. Website visitors immediately lose trust in websites with poor spelling.
If you want your business to succeed, I would suggest that you pick up two books on running an online/web design business and how to use XHTML/CSS. Two good starters are http://www.sitepoint.com/books/freelance1/ and http://www.sitepoint.com/books/css1/.
geof
For the third time I’m mentioning this in this very thread, positioning the text off-screen is bad for users who have images off and CSS on. Think logically here. h1/img is the most accessible alternative for now. Accept it and get on to better things.
That’s not really a header. That’s pretty much a paragraph!
A header should be concise.
For a home page, your header should be <h1>Passionate Hearts</h1>, or a relevant term like <h1>Online Dating</h1>
Don’t put sentences into <h1>s. You lose the Search Engine benefit because you’re diluting the effect of the <h1> (and it could be considered an attempt at spam). It’s also less usable, as you twist its semantic meaning here.
There is a very interesting, phillosophycal-practical blog.
maybe you know the writer:
Learn my post again!
I didn’t use positioning. I used text-indent. 
EVERYONE, look at Zeldman.com
He shows us the best example of how you can position <h1> text and get a header graphic.
Thus, text-indent is the real answer.
VGarcia. The point here is SEO. I mean, who really cares if they can’t see your header text…they couldn’t see it anyway with the image overlapping it.
Think of the possibility also of someone having css on and images off. Probably the same chances of someone going around with css on, flash installed…but javascript disabled.
if you want my own opinion, go for the text indent. I’ll say it for the 3rd time to match VGarcia’s 3rd too. So there, now we have an equal balance of how many times somebody said something.
No. It’s not the “real” answer. You haven’t proved anything. So Zeldman does it. Is he God? No. Is he infallible? No.
With images off and CSS on, you can’t see it. This is Vinnie’s point. It doesn’t matter if you’re using text-indent or absolute positioning… you’re using CSS to position it off-screen and that’s not good.
(To be picky, it is positioning. It’s not with “position:”… but it’s using “text-align” to position it, thus, positioning is an appropriate term.)
Not if they don’t have images on, which was his point? And we can live in a world with both accessible and SE-optimized sites.
Who cares? I do. Yes, the topic is SEO but we bring up the points of certain methods. If an SEO tactic hurts the accessibility of your site, then we’ll bring that up. Because it’s all relevant and it’s all important.
Actually, I spend a good amount of time like that. I like Flash, and CSS is a must… but JavaScript annoys me. People use it improperly, or in annoying ways… so I often disable JavaScript.
Open up your mind a bit. User preference should be key… you should be ready for anything.
Then we’ll choose our own way. I back Vinnie’s method because I feel it’s more appropriate and more accessible. I encourage others to do the same.
Same here. Accessibility should be higher on every webmaster’s list of priorities. To ignore it for SEO is shortsighted and irresponsible.
Vinnie’s is also less optimizable. how is google going to index an image tag.
If you want the rankings. go for the indent.
I don’t necessarily think it’s more appropriate. It’s just another method, and it’s weak for SEO.
The point was SEO, so the point stands, text-indent is better.
No, Zeldman is not God, but he probably knows a little more than you do about web design, accessibility, and usability. Heck, he wrote the book on standards. If anything we can peacefully agree that one answer is not better than the other. Afterall, that’s what Zeldman talks about too.
It’s just another theory on what accessibility can be and it will never be agreed upon.
Look at any of the big standards/design blogs out there. You’ll almost always see text-indent. Using an <img> tag is definitely fading out.
Plus, my second advise is don’t overdue it. In one sense, I totally agree that this is not to be used on anything but the header. To actually indent your main content is another issue. But we’re talking about the header graphic. So…really, what’s the big deal. If you have images turned off, you just won’t see anything…now that’s not so bad is it?
Sheesh, get off my case will ya?
Oh, and by the way,
(To be picky, it is positioning. It’s not with “position:”… but it’s using “text-align” to position it, thus, positioning is an appropriate term.)
If you’re going to be picky, at least be right.
It’s text-indent 
With the alt text. Same way it indexes tons of other images.
The point is SEO? Then why don’t we all just employ cloaking, doorway pages, and say “screw the user” because we’re only going after Google?
Designing for SEO only is not a smart move. People have to read your site too, and while you think images off/CSS on is a “fringe case”, I could probably point you to more than a few dial-up users who use this configuration because CSS is usually lightweight while images normally are not. Accessibility takes as many cases as possible in, not necessarily only the most likely.
Zeldman may know more about accessibility than me, but he may not know the same things that I do. I know a lot about CSS, but I’m sure people out there know things I don’t know. I understand and accept that fact, and because of that I will accept a new train of thought once it’s been proven to me.
argumentum ad populum. People, even lots of smart people, may not always do the best things. I know lots of smart smokers, does that mean smoking makes you smart or is a good thing?
Yes, not seeing the main title of someone’s page is not such a bad thing 
I’m not “on your case”. You provided a point, I provided a counterpoint.
text-indent still positions text away from a point where it would normally be. So we’re both right.
See Typepad’s accessible image replacement.
text-indent works in JAWS, the most popular screenreader used.
plus, alt and title text does not get spidered in the same manner that normal text within <h1> tags get spidered.
There’s no comparison SEO-wise from <img alt=“text” /> to <h1>text</h1>.
My last post here before I unsubscribe from this thread.
It seems the point that Vinnie is trying to get accross is being completely missed. It seems that many of you seem to believe your target audience are the search engines. As a result you have placed SEO above accessibility (and I’m willing to bet usability as well). Your target audience are human beings. They are the ones who place orders from your website, or click on your banner ads, or do whatever it is you want them to do. Everytime you employ some special trick or hack to improve your search engine rankings you are alienating a portion of your target audience. What good is a high search engine ranking if the users who follow their link to you can’t use your website?
There are ways to improve your search engine rankings without hurting accessibilty or usability. If you spent as much time learning how to design your website properly you wouldn’t feel a need to resort to hacks and tricks (that’s all that text-indent technique is, a hack). Your site would rank well in the SERPs and would be accessible to all. It dissappoints me to see how few webmasters even attempt to accomodate their users.
Say this to yourself, “I’m going to screw over some of my users because I’m a lazy cheater”. Do you like the way that sounds? That’s what you are saying by employing the text-indent hack and everything else similar to it. (screw = limiting some users because they’re not like you, lazy = could have designed the site better but didn’t feel like it, cheater = using tricks to rank well).
I know many of you are still going to to resort to hacks and tricks and by all means do so. It’s your choice. Just do the rest of us a favor? Don’t call yourself a professional web designer or SEO guru. It’s a slap in the face for the webmasters who give a crap.
good accessibilty + good usability = good SEO out of the box
explain to me how it becomes less accessible? I don’t place any vital information in my header. It would be as good as just not seeing the image. If you have images turned off, then you wouldn’t see the header.
I do agree that good access and usability = good SEO out of the box…
But I disagree that it’s less accessible and usable because I chose the text-indent method. I think you’re forgetting the point that I’m not indenting my entire website. it’s just the header!. Once you turn off images, then you see nothing! Same with text-indent.
BTW, I’m not slapping anyone in the face here. I think you’ve taken this a little too seriously and I did not intend to offend anyone.
Also, I wouldn’t exactly call this a hack. I mean, why would you put an image in an <h1> tag that was meant for text…that’s kind of wierd.
I’m not screwing anyone, and I’m not cheating. It’s clever, and it works, and it’s accessible. I already mentioned that the most popular screen reader (JAWS) “reads” the indented text. Both methods work.
Granted, some hacks are good, and some hacks are bad. Those who think “all hacks are bad” have a little more learning to do.
btw, I am a professional
I took a look at your site – impressive.
However let me point out that one who must say they are, usually are not. Just like Bill Gates does not need to say he is rich. He just is rich.
Anyways great discussion on SEO and standards.
No, but you’d see the alt text if you used an <img /> tag.
Knowing what site you’re on is important. Let’s take an example site and turn images off. How about…yours. When you turn images off there is no indication of the site you’re on. That breaks one of the top usability rules right there, in addition to untold marketing/branding rules. Is that smart or fair? I think not. (See the attached image.)
H1 is meant for any content that holds top-level information on a site, whether it be images, text, or whatever. I don’t consider it weird in the least. HTML was never meant to be text-only all the time. You can have images, objects, etc. in your markup, as long as you have a good fallback.
Ah, screen reader bias, the crutch of those who think they know accessibility.
Accessibility is not just catering to those who use screen readers. Other people have to use your site too, including those who may disable image loading for whatever reason.
I’m not saying all hacks are bad. I’m saying that some hacks aren’t smart to use in the long run. Think about it:
- You’re messing with a certain percentage of your users who turn images off.
- You’re trading off one set of users for another. For search engine rankings.
- You’re mixing up your content (your header image) with your presenation (your CSS). The whole point of CSS is to separate those two where they logically belong.
Maybe so, but “professionals” don’t always do the right thing. Look at half of the NBA, for example.
I absolutely agree with you guys on the points you are bringing up. However, most webmaster who start optimizing their websites get carried away and hurt the usability of their websites not because they are lazy cheaters but because they have no idea when to stop. How do most webmasters get their SEO information? Through forums like this one and websites that provide them with that information. So webmaster who is new to SEO goes to the forum to read some posts, finds the one where h tags are discussed and figures out that this is important. Then he looks at his site and says “Hey, I don’t have any <h1> tags anywhere on my site. I think I’ll place them here, here and here and put some of my keywords here, here and here.” Is that tricking the search engine? I don’t think so. Would you call webmasters who read everything they can find and optimizes their website day and night a lazy cheaters?!
Most people on this forum either know how to optimize their websites or try to learn how. One can be cheating only if he/she knows that it is wrong and still decides to go ahead with it anyway. Everyone else simply learns on their own mistakes, experimenting with what works and what doesn’t.
I hope this is one of my last posts on this thread. and hopefully end it between those of us who have already participated a lot already on this topic.
You guys all have very great minds and I respect your opinions on this issue of text-indent. If you’re like me, you could say we’ve gone back and forth and we both made our points understood very well.
I confess, saying “i am a professional” was a bit dorky on my behalf.
One can be cheating only if he/she knows that it is wrong and still decides to go ahead with it anyway
I suppose it’s not cheating because I don’t think it’s wrong. I guess that’s the difference.
For any future person that reads this thread I think we’ve covered the best of both sides of the topic at hand.
On the NBA website…I feel ya. Those guys aren’t professionals. There isn’t a single site out of the entire professional sports world of the NBA, MLB, NHL, or NFL ( with the exception of the KC Chiefs ) that passes through the W3 validator.
Stymiee and VGarcia both made excellent points of acecssibility but I think I’ve made my case the best I could.
The screenshot of my website with images disabled doesn’t seem to inaccessible in my own opinion. Afterall, there isn’t anything that would normally show up that you couldn’t already read. I made sure of that.
Blessings all,
Dustin