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

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?

htmlcss


Solution 1:[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.

Solution 2:[2]

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.

Solution 3:[3]

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.

Solution 4:[4]

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.

Solution 5:[5]

You can but you shouldn't have multiple H1s anyway.

Quoting A11yproject's Accessible Heading structure (How-Tos article link)

Having multiple h1s on a web page is bad practice, for accessibility and for SEO. It creates a flat and meaningless structure. But, it's not a WCAG 2 AA violation. The long answer involves a short history lesson.

Using multiple h1s was proposed with the introduction of the HTML Document Outline in HTML5. Each section in the outline could contain an H1. But here's the snag: The Document outline was never adapted by browsers or assistive technology. Therefore the support for multiple h1s was dropped in HTML5.1

Solution 6:[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?

Solution 7:[7]

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

Solution 8:[8]

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

Solution 9:[9]

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.

Solution 10:[10]

It all depends a bit on what your doctype is. With html5 it's OK to use multiple h1 tags per section. (don't read, per <section></section>!) When using in example the XHTML 1.0 Transitional doctype, I'd avoid using multiple h1 tags on a single page.

When using in example the XHTML 1.0 Transitional doctype, I'd often go for something like this:

  • h1 : max. one time per page
  • h2 : max. two times per page
  • etc.

Also @joel, even though your answer is sort of OK, please don't try to confuse anyone... I can say I'm a Google software engineer, because I simply work with Google (not the company, but the product) AND I'm an engineer... Please list your company name AND any certifications when claiming things as such.

Solution 11:[11]

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.

Solution 12:[12]

With the adoption of HTML5, several H1's is perfectly fine if it's reasonable. It was fine, IIRC, also in HTML4 but it I never saw it used unless the page(s) were quite spammy.

One example where multiple H1's is applicable, is a list of articles with title, excerpt and href that links to the full thing:

<header>
    <h1>Articles</h1>
    <h2>About fish</h2>
    <p>Some intro text</p>
</header>

<section id="articles">
    <article>
        <h1>Title</h1>
        <blockquote class="excerpt">
            Excerpt here
        </blockquote>
        <a href="/whatevs">Read more</a>
    </article>
    
    <article>
        <h1>Title</h1>
        <blockquote class="excerpt">
            Excerpt here
        </blockquote>
        <a href="/whatevs">Read more</a>
    </article>

</section>

This is semantically just as it should be and thus, also good in terms of SEO. In fact, I would argue that this is better than having H2's for the articles, as the article itself is not a sub title to "Articles about fish", but I guess that could be argued against, as well.

Solution 13:[13]

Concerning SEO and h1 multple, although Google has a dominant position, it is interesting to note that Bing Webmaster Tools raises a hight severity SEO issue so if you are interested in optimizing for multiple search engines, it may be relevant to limit H1 tags to 1. Below example from a site I work on:

enter image description here

Solution 14:[14]

It's best to have 1 H1 per page, as it simplifies and tells Google your main topic.

Any subheadings should be H2's, and subheadings below those should follow in hierarchal order:

H1 H2 H3 H4 H5, and so on.

You want to maintain this exact order. If you start a new section, start with H2 and maintain the same order.

Related Questions