How many h1 tags can you have on a page?

How many h1 tags can you have on a page?

My very popular post about header tags contains one great simplification. The one that says you can only have one h1 tag on a page.

The truth is, that’s no longer the case, but for most writers it’s something you won’t need to worry about.

Sometimes you can have more than one h1 tag on a page

If you’re an HTML jockey or website developer, you’re going to have a fit about this next section, but I have a fiendish mission to dumb this down so that guys like me can understand what the state of play is with h1 tags in 2013 😉

Does your page use HTML5?

The latest version of HTML – the computer language that’s used to build pages on the web – enables developers to divide the page up into sections. And each section can have its own h1 tag (headline/heading).

How do you know if your site is coded using HTML5? If you don’t want to go diving into your source code, the easiest way is to ask your developer, or look on the site you got your theme from.

That’s the theory. What about the practice?

If your site is coded in HTML5 and you have multiple h1s – find ‘view source’ or similar in your browser and search on the source code – just make sure you have your main heading in h1 tags, and don’t worry about the other h1s.

If you have some say in coding for your site, there is a really good case for keeping just one h1 tag on each page. Consider what you have h1 tags for. They’re for your main headline – the most important thing you’re saying on the page.

If you have more than one set of h1 tags, you’re sending a less clear message to Google, and by having more than one important heading on the page, you’re making your human readers’ experience less clear as well.

For those reasons, I’d stick to one h1 tag if you can.

What are your thoughts about multiple h1 tags? What are your experiences with HTML5?

Thanks to Jean-Etienne Minh-Duy Poirrier for allowing me to use the image.

  • Chris

    David, currently I am taking an online course with W3C for html5. A section of the course focuses on microdata for html. With microdata html code they say we can use as many H1 tags on a web page. Is this helping or hindering the SEO
    of the page? — Thanks Chris

    • David Rosam

      Hi Chris

      This is a tough one. Both W3C and Google’s Matt Cutts say it’s OK to have multiple h1s. I can’t disagree with them on a technical basis. However…

      My view, from a usability and SEO perspective – they’re often intimately related, of course – is that you should try to use only one h1 on a page. That means there’s one piece of copy that’s presented as the most important on the page.

      It therefore makes it easier for a reader or Google to digest the page. Generally Google likes this sort of approach, so unless I see any solid evidence that this isn’t the case, I’ll stick to using just one h1.

      Does that make sense?

      • Robert

        Traditionally, H1-H6 tags were meant to emulate headings in a very long article. The H1 would be the title of the article itself, H2 tags would be sections of the article, H3 tags between H2 tags would be subsections, etc. Following this convention would allow a computer program parsing the document to automatically generate a nice, nested table of contents.

        For people who have experience editing Wikipedia articles, this should be familiar. The article title is automatically given the H1 tag. Entering `==Section==` will generate a H2 tag for a section. Entering `===Subsection===` will generate a H3 tag for a subsection. The Mediawiki software automatically generates the table of contents from this structure.

        This works remarkably well for a page with a single article. But now consider two bugaboos. First, the article isn’t the only content on the page. The logo, sidebar, and footer are very important parts of the page, even though they do not contribute to the content proper. Second, some pages list more than one article. This is most often seen on search result pages, blog homepages, and blog monthly archive pages.

        So how do you markup a page that contains *more* than just an article? HTML5 is an attempt by the W3C and WHATWG organizations to standardize new HTML tags that allow the programmer to describe your page outline using code. It goes beyond the traditional H1-H6 outlining used previously, and adds new tags that define semantic contexts. For example, HEADER, MAIN, FOOTER, ARTICLE, SECTION, NAV.

        These new tags *can be nested*, allowing for much more flexibility in creating a page outline. So using HTML5, the entire document is a bounding element. Inside of that, we have a HEADER and a FOOTER for the page. Between those we have ARTICLE and SECTION tags. Each of these defines a new context, and these contexts can have their own HEADER and FOOTER tags specific to that ARTICLE or SECTION.

        Inside of each ARTICLE or SECTION, H1-H6 tags define a structure *for that context*. The idea that a H1 tag is used only once on the page is a dated concept. Parsers capable of understanding HTML5 markup recognize the H1 tag as being the most important header for a specific region of the page, not the page as a whole. I would recommend reading for more information on how outlines are generated using the HTML5 markup.

        The reason I’m going into such depth about this is because this is now 2013 :-p In 2011, when HTML5 was in its infancy and (X)HTML reigned, yes, H1 still referred to the headline for your page. As HTML5 has gained traction, it’s important to recognize what it means for automatically generated outlines (important for both search engines and screen readers). H1 has a new meaning, and it is dependent on the other tags on the page defining a context.

        So now, when you have a blog homepage listing blog articles, the ARTICLE tag tells any HTML5 parser that the H1 tag contained within is the headline *for that article*. Any H1 tags outside of the ARTICLE tag are specific to the page (this means it’s now more proper to use H1 as the logo wrapper than ever before).

        As someone who has been trying to grok HTML5 for the last month or so, I’ve found HTML5 outliner tools to be incredibly helpful in understanding how the HTML5 spec determines an understanding of the outline. It’s been a weird transition, but the new tags allow for much greater freedom and flexibility in defining your page outline in a meaningful manner than the H1-H6 paradigm ever did. Moving forward, it will be important to start adopting this new standard (as it has finally matured to the point that it can be adopted :-p).

        • David Rosam

          Thanks for your comprehensive comment Robert.

          I’m trying to make things simple for a largely non-technical readership, but I’m sure some of them will really appreciate your input.

  • Kaser Mehmood

    Not sure why comment didn’t go through but if you look at this website (only given as a reference reason) you will notice more than one H1 tag on a page.. Bing is asking to remove them.. so maybe it is better to use one per page..

    • David Rosam

      Hi Kaser

      I’m sure I replied to your comment, but it seems to have disappeared.

      Just to recap, I agree – if not just for keeping Bing happy :-)

  • David Rosam

    Hi LPCG

    Yes, you can have have more than one h1 tag on a page in HTML 5. I say that in the post above, so from that POV, I’m in total agreement with the two links you posted.

    However, just because you can do something, doesn’t mean it’s a good idea 😉

    Let’s forget about Web design and development, or even technical SEO and think about SEO content. Consider the complexity of a page that does require more than one piece of copy with h1 tags. Why are we putting, in effect, three different pieces of content on a page that all have the same importance?

    Can we really not structure the content so that we flag up clearly the most important piece of communication on the page? That’d give us one piece of h1 content and a number of h2s.

    If we really can’t do that restructure, I’d argue that the three pieces of content should be each on a separate page to give the poor reader an easier time in digesting the content.

    • LocalPCGuy

      I agree that it isn’t something you are probably going to do on a lot of pages. But places where it makes sense would be things like a blog landing page, or a news aggregation page where news summaries are posted with links to the full detail page. In reality, I think we are basically violently agreeing, with the distinction maybe being that I think it is definitely case by case driven, and I would not make a general rule discouraging it. Maybe I have a bit more faith that the developer reading this can determine whether it is appropriate to use multiple H1s or not and will do so appropriately and not indiscriminately. But I can definitely appreciate that not all devs will be so discerning.

      • David Rosam

        We are agreeing here.

        The difference is that you’re talking about developers, but I’m talking about the person responsible for the content.

        I always mark up content with the tags so that anyone else posting the content will know exactly how it should be presented.

        But the idea of using multiple s on blog summary and news aggregation page is bang on. That’s 100% in the dev’s domain as far as I’m concerned.

  • Gene McKenna

    Agree with the comments that just because you CAN have multiple h1s (if you are using html5 and if you are using it correctly) doesn’t mean it’s better for SEO to do so. Also given the two big Ifs (if html5 and if done correctly) you might be doing harm if you aren’t very careful. If you have a million pages to worry about (or 10+ templates that all change at some frequency), and you want a way to automatically verify they are correct, you either need to build a tools with a good html5 parser that can verify the page is in html5 and is using multiple h1’s correctly, or you can stick with tried-and-true limit of 1 h1 per page somewhere near the open body tag.

    The video from Matt Cutts being mentioned below, by the way, is from 2009 and pre-dates the html5 discussion. He is mostly saying don’t abuse h1’s by stuffing your page with them. He is not saying google will understand your page just as well and you will rank just as well with 3 well-thought-out h1s.

    • David Rosam

      Thanks Gene

      Yeah. Thankfully those kind of nightmares don’t tend to fall to me – I have an associate who knows his technical SEO stuff.

      But how I like simplicity :-)

      Almost as much as I like taking some (much?) of what Matt Cutts says with a pinch of salt 😀

      Good point about the age of the video, though.

  • USA Lawyer

    bing “usa lawyer” and analyze some of the top results bro…

    • David Rosam

      Thanks for your comment

      @Kez’s comment is 8 months old now. I’d take a guess that Bing has caught up with HTML5 by now!