Do hidden header tags have semantic value?

Question

I am using multiple DIV tags with the same content to create one visible heading tag.

So where I would use H1, it is actually multiple div tags styled in such a way as to create a desired effect.

Now i was wondering, because I still want my page to have logical semantic value, if I were to add <h1>text here</h1> just above the div collection and set it to display:none; would that still create a logical order to the page? or would web crawlers such as google ignore the hidden h1 and penalise me for the duplicate content in the div tags?

To give a clearer idea of what i mean, heres a rough mockup:

<h1 style="display:none">my header text</h1>

<div>
    <div>my header text</div>
    <div>my header text</div>
    <div>my header text</div>
</div>

When viewed in a browser, the my header text in the divs are only shown once but are needed 3 times to create the effect I need.

Im sorry if the question seems confusing and a little vague but I dont really know how to ask this particular question but I hope I have explained it well enough.

Answer 1

Semantic value and SEO value are slightly different things. One could always argue about the semantic value of doing what you're suggesting although I would say it has little to none (because there is a better alternative).

I believe google ignores anything hidden that way to avoid things like keyword stuffing. They have stated a few times that they only want to read what is actually visible on the site to users, so they should ignore something people can't see. There are, however, some techniques for doing what you want to do for sites that use a banner image that (the last time I checked) google did pay some attention to.

In your case you can easily avoid this though. You can replace your first

<div>my header text</div> 

with

<h1>my header text</h1>

and adjust your code around that.

Reset all the browser defaults for h1 tags by setting height: 100%; margin: 0px; padding: 0px; font-weight: normal; display: block; and treat it exactly like a div. After that apply whatever styling you would have done to the div. The result is something that is semantically correct (your header is in an h1 tag at the top of your content) and that google is more likely to read.