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

Issue

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?

Solution

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.

Answered By – Treb

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0