Is it alright to use multiple h1 tags on the same page, but style them differently?

Question

I have a webpage that I use h1 tags multiple times within various DIVs and I style h1 for each div to be the appropriate size.

For example...

#conten         


        

Answer 1

Matt Cutts from Google answered to More than one H1 on a page: good or bad? (Mar 5, 2009) with:

Well, if there's a logical reason to have multiple sections, it's not so bad to have, you know multiple h1s. I would pay attention to overdoing it. If your entire page is h1, that looks pretty Creti, right? So don't do all h1 and then you CSS to make it look like regular text because we see people, who are competitors complain about that if users ever turn off CSS or the CSS doesn't load, it looks really bad. So, you know, it's ok to have a little bit of h1 here and then maybe there's two sections on a page, and so maybe have a little bit of h1 here.

But you really should use it for headers or headings, which is what the intent is. Not to just throw h1 everywhere you can on a page. Because I can tell you, if you just throw h1 everywhere on a page, people have tried to abuse that and so our algorithms try to take that into account so it doesn't really do you that much good. So I would use it where it makes sense and more sparingly, but you can have it multiple times.

Answer 2

Semantically, I prefer using one h1 on the page, mainly for the title of the page. It probably doesn't matter too much with SEO, and with the way html is going with HTML5, the generic header tag will make it much simpler and this argument obsolete.

Answer 3

In trying to answer the same question I posted this question which may have some useful information. My concern with using the same H1, H2, H3 in differnt places is that unless you ALWAYS specify a 'parent' style as you did in your example* - then you can run into problems.

Dilemma in deciding how to create CSS for H1, H2, H3 etc.

* thats to say you never define 'h1' by itself

Answer 4

In my opinion, you don't need to worry, its ok to do it like this.

H1 designates part of your contents to be a first level heading. So if you have a first level heading in your navigation div (e.g. <H1>Navigation Menu</H1>), of course that should be #nav h1.

If you should have several H1s within your contents depends: If you have a blog and every entry has its own heading, those would be H1s. However, if your blog itself has a heading (e.g. <H1>My Blog!</H1>), the blog entry heading should be an H2.

But that is only theory. Go for what is readable, semantic markup. You can best decide on that by looking at your html and asking yourself: 'Is it readable? Would the readability improve if I did it the other way?' The answer will vary from project to project.

Answer 5

I think its good SEO practice to place an H1 tag at the top of every block element on my page, but thats just me. Of course this H1 tag should contain information relevant to the keywords/topics you are targeting.

This is a very effective SEO method I have found, so the people telling you not to do this are trying to keep you from joining in on our winnings.