Forum Moderators: not2easy
Home :: Calender :: February
And then the content for the page. Here is a cut down version of the site:
<body>
<h1 id="header" align="left"><img src="images/logo.gif" width="625" height="92" alt="Welcome to our Organization" /></h1>
<strong id="nocss">While our content is fully available to you, your browser has certain limitations that prevent you from fully experiencing the site. If you would like more information on upgrading please check our <a href="upgrade/">Browser Upgrade</a> page, otherwise you still have access to the site and please enjoy your stay.</strong>
<!-- start navigation -->
<div class="nocss"><a href="#content" title="Skip navigation" accesskey="2">Skip navigation</a><br /><br /></div>
<div id="left">
<h2 id="menuheader">Organization Online</h2>
<div id="menu">
<ul>
<li><a href="./" id="current">Home</a></li>
<li><a href="Other/">Other</a></li>
<li><a href="Other2/">Other 2</a></li>
</ul>
</div>
</div>
<h2 id="contentheader">Home</h2>
<div id="content">
<p>
My content goes here
</p>
</div>
</body>
And then I use h3, h4 etc.. for within the content itself. I was just thinking though, I personally haven't seen using the h1, h2 tags used on images. Though I do it almost all the time. It allows me when needed (a logo for example) to use a image yet maintain structural meaning.
This, of course, looks great on Lynx and any screen readers (does anyone know of any simulators or one I can try out just to see how my site works? I just spent like 2 hours making some tabular data accessible and I want to make sure I didn't waste any time ;)). They simply use the alt text and then interpret it as a header However, I am not sure if Google works quite this way and if it is, in fact harming me.
Should I just put my logo into a div and then in the main content using <h1>Welcome to Organization</h1> including any other search engine keywords? In that case, what should I do for the headers of my content and menu divs? I'd like to use the header tags but then I can't have any before my h1 which would be used in the content.
I am really unsure of what to do here. Any help would be greatly appreciated :)
Basically to write the normal textual Header into the h tags and then hide it via CSS and show the image instead.
You'll find lots on this if you search google, but try this for a starter:
.widgetworldinc span{
display:none;
}
.widgetworldinc {
width:200px;
height:20;
background-img:url(widgetworldinc_logo.gif);
}
<h1 class="widgetworldinc" title="Widget World Inc"><span>Widget World Inc</span></h1>
But test it thouroughly to make sure.
SN
PS: no clue how google will treat the display:none; might want to disallow *.css in your robots.txt too.
<ADDED>
For some projects I actaully palced the header last, as it only contained logo and nav stuff, useless to search engines and ad targeting bots. CSSed it back up though.
</ADDED>
