Hidden H1 tag - ?permissable

[RyanKent]

Until now I have been building websites either from scratch or with a template. Recently I decided to learn Adobe Dreamweaver.

At the end of the first "Building a Website using Dreamweaver" lesson, the author notes the site is done but an H1 tag is missing. The instructor advises "The page doesn't have a top-level heading (

). The design uses the banner image instead. This looks fine in a browser, but search engines and screen readers expect pages to be organized with a proper hierarchy of headings:

at the top of the page, ..."

The instructor then walks readers step-by-step into creating an H1 tag and using absolute positioning of -500px top to cause the tag to not be visible.

My initial thought was the instructor was completely wrong for offering this advise, and users would be banned from search engines for following these instructions. I had planned to contact the writer and suggest the instructions be modified. Prior to doing such, I wanted to request a bit of feedback.

The banner image's text in this example is "Check Magazine: Fashion and Lifestyle". The H1 tag that is created and positioned off-screen uses that exact same text.

In an old blog comment, Matt Cutts shared "If you’re straight-out using CSS to hide text, don’t be surprised if that is called spam. I’m not saying that mouseovers or DHTML text or have-a-logo-but-also-have-text is spam; I answered that last one at a conference when I said “imagine how it would look to a visitor, a competitor, or someone checking out a spam report. If you show your company’s name and it’s Expo Markers instead of an Expo Markers logo, you should be fine. If the text you decide to show is ‘Expo Markers cheap online discount buy online Expo Markers sale …’ then I would be more cautious, because that can look bad.”"

I would like to get some mozzer feedback on this topic. Do you view this technique as white hat? black hat? or grey hat?

[Entrusteddev]

Personally I've always avoided hiding page objects, seems to be a little fruitless to put work into implementing an object on a page only not to show it.

If the graphic is simply text and the aim of the graphic is to provide a good looking heading theres no reason not to use Google fonts (or similar) or Cufon HTML5 tags.

[EGOL]

I would not hide the H1 on any of my sites.

[ihms]

Definitely not hide any heading tags!

But what about advanced development techniques like tooltips and lightboxes? If you want to display a part of the page only on a certain user interaction?

Would this impact your OnPage optimization negitively when the spider sees an html tag with a css property of hidden?