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...

#content h1 {
  font-size:22px;
}

#left-nav h1 {
  font-size:14px;
}

#content .recent-news h1 {
  font-size:16px;
}

Is this alright? I am worried about SEO.

What is the best way to go about this? Or am I worrying about nothing?

Answer 1

In general, you should only have one h1 per page, and that h1 should succintly represent the content on that page. As long as you are willing to style with CSS, find out which level of headings (h2, h3, h4, etc) that properly represent the headings you want to use, and then style them instead.

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

Just remember that your h1s are used to indicate context, not layout. So, there's nothing inherently wrong with having several on a page.

In this specific example, you need to decide if your left-nav h1s have the same contextual importance as your content h1s and your recent-news h1s. If a clear hierarchy exists in your mind, use your header tags to demonstrate it.

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

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 6

I don't like the idea of multiple H1s. H1 is the top level, most important heading and the page will basically be about that topic. If you have an equally important second topic, don't put it in another H1 tag, just put it in another page. It deserves that, right?

Answer 7

I try to have only one H1 on the page and have it almost but slightly re-arranged from the content of the title tag / H1 is the the main idea of an individual page every thing else should be an h2 tag and Lower....

Answer 8

If it is regarding seo it's better to use h1 tags And If you want to use it for just sytling purpose use css stylesheets.

The most important is that: If more then one h1 tag is used in a webpage then google may consider that page as spam. use can other heading tags other than h1 like h2 h3 h4 h5 h6 any number of times.

Answer 9

http://www.youtube.com/watch?v=GIn5qJKU8VM

This is a Google software engineer talking about this very topic. I will sum it up:

It is okay, but do not over do it or Google will reduce your page rank because it will think you are spamming content. They apparently have gotten complaints about people attempting to put everything in the H1 tag to increase the importance of that content, and thus, increase page rank. Needless to say Google caught onto that quickly and now they look at that.