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 icon wink How many h1 tags can you have on a page?

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.

Have you read these?

The following two tabs change content below.
 How many h1 tags can you have on a page?

David Rosam

Founder at Writing For SEO
One of the UK's first SEO Copywriters, I've been writing professionally for nearly 30 years. Today, I help clients to make their websites more profitable through high performance content and content strategy. Contact me via this site for a quote.
  • 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..