Advertisement

The Truth About Multiple H1 Tags in the HTML5 Era

by

Whether you're a webmaster or a web designer, there's a question you've most likely either asked or answered many times over the years. That question is, "How many <h1> tags can I use per page, and how exactly should I implement them?"

There are generally two reasons this question is asked. The first and most common is for SEO purposes; ensuring content is formatted in the best way possible to aid search engine indexing. The second is technical correctness; ensuring that markup is written in accordance with the appropriate W3C spec.

With the advent of HTML5 the answer to this question has significantly changed in both SEO and technical regards. It's now not only possible to have multiple <h1> level headings per webpage that will make sense to search engines, but in most cases it's actually the recommended course.

However, because the HTML5 spec is not all that widely understood yet, there is still a lot of advice floating around, some even written very recently, based on the rules of pre-HTML5 web design.

In this tutorial we're going to clear up some misconceptions. We'll take an in-depth look at what HTML5 means for <h1> tag usage, as well as how you can take advantage of the enhancements now available to create web pages that are more semantically rich and well-structured than ever before.


The Pre HTML5 "Single <h1> Tag" Rule

For a long time it was considered one of the cardinal rules of HTML and SEO that each individual page of a site should have one <h1> level heading, and one only. Additionally, the rule prescribed that this singular <h1> heading should denote the primary subject matter of the page.

This rule was generally followed with the goal of helping search engines better understand the primary subject matter of each page, so they could determine their relevance to various search phrases, improve search engine accuracy and hence improve rankings for well-crafted sites.

Let's consider an example pre-HTML5 business website. In this example site the business name is displayed in the header section on all pages, the homepage features a description of the business, and in another area of the site expert articles are published.

In following the "Single <h1> Tag" rule, the homepage of this website has <h1> tags applied to the name of the business in the header section, indicating the business itself is the primary subject matter of that page.

However, in an article published elsewhere on that same website, <h1> tags are removed from the business name in the header and instead applied to the article's title. This is done because the article title provides a more representative label for the primary subject matter of the page, which is now the article's content as opposed to the description of the business that was on the homepage.

A pre-HTML5 version of this website would therefore be marked up something like this:

html4markup

Why Headings Matter: Document Outlines

Despite the long-time heavy focus on <h1> tags, they were never an element that operated in isolation, independent of the rest of the document. There is a reason behind the importance of careful heading tag placement in both the HTML5 and pre-HTML5 eras, and that is the generation of document outlines.

Document outlines are something akin to a table of contents for a website. They are automatically generated from the markup on any given webpage.

Prior to HTML5, document outlines were generated from your use of heading tags <h1> through to <h6>. Every use of a heading would imply the beginning of a new section of content.

Take for example the following html, noting the placement of <h1>, <h2> and <h3> tags, which will determine the document's outline:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
      <title>Pre-HTML5 markup example</title>
   </head>
   <body>
      <h1>The proper use of peanuts</h1>
      <h2>How to eat peanuts</h2>
      <p>Peanuts can be eaten with salt.</p>
      <p>This is an acceptable use of peanuts.</p>
      <h3>Superior peanut eating methods</h3>
      <p>Peanuts are infinitely better when combined with chocolate.</p>
      <p>We recommend this approach for best results</p>
      <h2>Incorrect application of peanuts</h2>
      <p>Peanuts should not be used to fill parking meters.</p>
      <p>They will not be effective in this capacity.</p>
   </body>
</html>

Pre-HTML5, the markup above would generate a document outline as follows:

  • 1. (document) The proper use of peanuts
    • 1. (h2) How to eat peanuts
      • 1. (h3) Superior peanut eating methods
    • 2. (h2) Incorrect application of peanuts

The first <h1> element is considered the label for the entire document. The subsequent headings are considered the labels for sections of content within that document, forming a tree beneath it.

The above example is simple enough, but in the wild webpages are rarely this simple. When we need more complex content presentation we run into the big problem with pre-HTML5 markup, and the reason it was previously necessary to use only one <h1> level heading per page.

In the example above we have a single topic being discussed: "The proper use of peanuts". But what if this topic is being discussed on a page with multiple articles of equal importance, as you might see on a blog for example?

Take this html with a second article displayed, (each article is wrapped in <div> tags):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
      <title>Pre-HTML5 markup example</title>
   </head>
   <body>
      <div>
         <h1>The proper use of peanuts</h1>
         <h2>How to eat peanuts</h2>
         <p>Peanuts can be eaten with salt.</p>
         <p>This is an acceptable use of peanuts.</p>
         <h3>Superior peanut eating methods</h3>
         <p>Peanuts are infinitely better when combined with chocolate.</p>
         <p>We recommend this approach for best results</p>
         <h2>Incorrect application of peanuts</h2>
         <p>Peanuts should not be used to fill parking meters.</p>
         <p>They will not be effective in this capacity.</p>
      </div>
      <div>
         <h1>Boiling beans</h1>
         <h2>Is boiling beans really worth it?</h2>
         <p>Let's be honest, it takes ages.</p>
         <p>We advise just buying canned beans instead.</p>
      </div>
   </body>
</html>

Pre-HTML5, this markup would have generated the following document outline:

  • 1. (document) The proper use of peanuts
    • 1. (h2) How to eat peanuts
      • 1. (h3) Superior peanut eating methods
    • 2. (h2) Incorrect application of peanuts
  • 2. (h1) Boiling beans
    • 1. (h2) Is boiling beans really worth it?

Now, even though there are two articles of equal importance on the page, the first article's heading "The proper use of peanuts" is still interpreted as the label representing the entire document simply because it is the first one encountered. This would thus indicate that the entire subject matter of the page is "The proper use of peanuts" even though the second article is about a totally different topic.

The typical way to combat this was to create a catch-all heading with <h1> tags wherever multiple sections of content of equal importance were displayed, in an attempt to represent them all to the greatest extent possible. For example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
      <title>Pre-HTML5 markup example</title>
   </head>
   <body>
      <div>
         <h1>Legume Literature Blog</h1>
      </div>
      <div>
         <h2>The proper use of peanuts</h2>
         <h3>How to eat peanuts</h3>
         <p>Peanuts can be eaten with salt.</p>
         <p>This is an acceptable use of peanuts.</p>
         <h4>Superior peanut eating methods</h4>
         <p>Peanuts are infinitely better when combined with chocolate.</p>
         <p>We recommend this approach for best results</p>
         <h3>Incorrect application of peanuts</h3>
         <p>Peanuts should not be used to fill parking meters.</p>
         <p>They will not be effective in this capacity.</p>
      </div>
      <div>
         <h2>Boiling beans</h2>
         <h3>Is boiling beans really worth it?</h3>
         <p>Let's be honest, it takes ages.</p>
         <p>We advise just buying canned beans instead.</p>
      </div>
   </body>
</html>

Note the addition of the generalized <h1> tagged heading, and the demotion of each subsequent heading down one level.

The following document outline would now be generated:

  • 1. (document) Legume Literature Blog
    • 1. (h2) The proper use of peanuts
      • 1. (h3) How to eat peanuts
        • 1. (h4) Superior peanut eating methods
      • 2. (h3) Incorrect application of peanuts
    • 2. (h2) Boiling beans
      • 1. (h3) Is boiling beans really worth it?

Problems Caused by Pre-HTML5 Document Outlines

This document outline, though it's the best that could be done pre-HTML5, presents some significant problems:

  • The generalized label for the whole page dilutes relevance.
    We have the <h1> tagged "Legume Literature Blog" title acting as the label for the whole page, and yet the text of this heading gives only a generalized representation of the content. This dilutes the ability of search engines to interpret the actual subject matter on the page and in turn its relevance to search phrases.
  • Separate articles are seen as subsections of a single piece of content.
    There is no way to distinguish the two articles on the same page as equally important and self-contained entities. They are both seen as a part of a single overall piece of content, even though they are not.
  • Different markup is required in different site areas.
    Should a visitor view one of the articles by itself, as can be done on a typical blog, the markup would have to be reworked so the <h1> tags are applied to the article title instead of the site title, as I demonstrated with my example business website in the previous section.
  • There are restrictions on the nature of the document label/site title.
    In many cases a site title, (which tends to play the role of document label even in HTML5), may not relate to a page's content in any meaningful way. For example, I might run a blog with the site title "Kezz Says" and it might display one article on HTML coding and another on cute puppies. In this case it would not make sense for the site title to be interpreted as representing either of these articles, so I would have to change the name of my blog. This can be a problem, particularly if a site wishes to brand itself with a name that may be memorable, but not necessarily meaningful.

This is where HTML5 comes along to save the day and solve each of these problems.


The HTML5 Document Outline Algorithm

If you consider each of the problems just described above, they all have a common and somewhat simple root: The assumption that each web page is a singular document with a singular topic requiring only a singular label.

The equally simple solution to these problems would come from the ability to indicate if a webpage had discrete sections, potentially with multiple topics each with their own meaningful label.

If it were possible to specify that each article on a page was separate, this would make it possible to label them with meaningful headings that accurately represented their contents, and give each one the same weight of importance.

If it were possible to make it clear when a site title was not representative of the page's content, the problem of diluting relevance would be solved.

With a clear indication in place of the difference between the site title, articles and article titles, it would no longer be necessary to change markup from one area to another. A <h1> tagged site title could keep its <h1> tags throughout the site.

And because it would be made clear if the site title didn't represent the article content on the page, it would be possible to set it to anything at all, no matter how abstract.

HTML5 makes all these things possible through the introduction of its semantic elements and the HTML5 document outline algorithm.

Key Aspects of the HTML5 Document Outlining Algorithm

While the pre-HTML5 document outline was drawn purely from heading tags alone, the HTML5 document outline algorithm utilizes the following key aspects:

  • Sectioning root: A sectioning root is a container that provides a scope for the discrete content sections that will be defined within it. Each sectioning root gets its own individual outline.The top level sectioning root of any page is formed by its <body> tags, so there is always an outline generated for any webpage, starting from the <body> tags and working through the sections it is broken into.
    • Sectioning root tags: <body>, <blockquote>, <figure>, <td>, <details>, <dialog>, <fieldset>
  • Sectioning content: Each sectioning root is broken into a series of content sections. These sections are created by placing sectioning content element tags around discrete pieces of content. Sectioning content elements are nestable and semantic. The type that should be used depends on the nature of the content it will contain. (We'll discuss how to use each sectioning content element further on.)
    • Sectioning content tags: <section>, <article>, <nav>, <aside>
  • Heading content: Text-only labels for sections of content. In the absence of sectioning content tags, the presence of a heading tag will still be interpreted as the beginning of a new content section..
    • Heading tags: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>

Understanding how these aspects of HTML5 are used is relatively straightforward, and the process typically goes much like this:

  1. The sectioning root of the document is formed by its <body> tags.
  2. Within that sectioning root, the document is broken into sectioning content, e.g. by wrapping articles with the <article> tags.
  3. Heading tags are placed into the content sections as required, with the first heading tag in any section acting as the label for that section.

There are many other aspects to the HTML5 document outline algorithm. Extensive information on these is available on W3C.

However, with just the aspects listed above, we are able to solve all the problems described in the previous section of this tutorial.

Solving the Old Document Outline Problems

Let's take another look at our "Legume Literature Blog", as it could be marked up using HTML5. The following simple modifications have been made:

  1. <!DOCTYPE html> added to invoke HTML5
  2. <article> tags have been added wrapping each article, replacing the generic <div> tags
  3. Article headings have been changed from <h2> up to <h1> tags
  4. The other heading tags in each article have been adjusted up one level in kind
  5. A branded/non-meaningful site title is used
<!DOCTYPE html>
<html>
   <head>
      <title>HTML5 markup example</title>
   </head>
   <body>
      <div>
         <h1>Whackamoon Legumes!</h1>
      </div>
      <article>
         <h1>The proper use of peanuts</h1>
         <h2>How to eat peanuts</h2>
         <p>Peanuts can be eaten with salt.</p>
         <p>This is an acceptable use of peanuts.</p>
         <h3>Superior peanut eating methods</h3>
         <p>Peanuts are infinitely better when combined with chocolate.</p>
         <p>We recommend this approach for best results</p>
         <h2>Incorrect application of peanuts</h2>
         <p>Peanuts should not be used to fill parking meters.</p>
         <p>They will not be effective in this capacity.</p>
      </article>
      <article>
         <h1>Boiling beans</h1>
         <h2>Is boiling beans really worth it?</h2>
         <p>Let's be honest, it takes ages.</p>
         <p>We advise just buying canned beans instead.</p>
      </article>
   </body>
</html>

Now the HTML5 document outline algorithm would give us the following:

  • 1. (document) Whackamoon Legumes!
    • 1. (article) The proper use of peanuts
      • 1. (h2) How to eat peanuts
        • 1. (h3) Superior peanut eating methods
      • 2. (h2) Incorrect application of peanuts
    • 2. (article) Boiling beans
      • 1. (h2) Is boiling beans really worth it?

The first thing you may notice is the appearance of the (article) element in the outline, and next to those the headings for each of our articles.

Note that in HTML5, <article> tags are specifically used to indicate "a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content." (source: W3C)

The appearance of the (article) element next to our article headings, rather than the heading tags as we saw before, tells us these things are now occurring in the outline:

  • Each article has been recognized as a self-contained piece of content with equal weight of importance to one another.
  • The article headlines are now being correctly matched to the articles as meaningful labels that represent their subject matter.
  • Because the articles are correctly labeled with their own headings, the site title is no longer being interpreted as representative of the content in those articles.

This means that all the problems we outlined earlier in this tutorial have immediately been solved:

  • Solved: The generalized label for the whole page dilutes relevance.
    We no longer have any dilution of relevance from generalized labels, as the label of each article is clearly associated with it.
  • Solved: Separate articles are seen as subsections of a single piece of content.
    The page is no longer seen as one singular piece of content, because the presence of the article tags indicates where the page is broken into independent sections.
  • Solved: Different markup is required in different site areas.
    Because all the <h1> tags used in the markup are now correctly interpreted, and we no longer have to worry about labels diluting relevance, we no longer need to apply different tags to the site title—it can remain tagged at <h1> level throughout.
  • Solved: There are restrictions on the nature of the document label/site title.
    Because the site title is no longer interpreted as a label for the article content we're free to set it to anything we like. It no longer has to act as a "catch-all" representative for all the content on the page, so it can be an abstract or branded title that doesn't relate to the article content at all.

Why Multiple <h1> Tags Are Correct

You can also now see from the HTML5 document outline generated by our markup that it is perfectly fine to use as many <h1> tags as your document calls for; that is one per sectioning root or content section.

You can also see from this example how it would be less correct to use only one set of <h1> tags in this example, and that multiple sets of <h1> tags more accurately represent the content.

If you still had <h1> tags applied only to the site title, and <h2> tags applied to your article titles, the outline of your articles would be thrown out.

This is because by marking up your article headlines with <h2> tags you are effectively saying they are level two headings, even though they are actually level one headings within the scope of the <article> section.

In turn, the second level subheadings of your articles would necessarily be marked up with <h3> tags incorrectly setting them to level three, your third level headings marked up with <h4> tags and so on.

It is permissible by the HTML5 spec to use lower level headings than <h1> to label a section, and sometimes you may want to for presentation reasons, such as displaying a smaller sized heading in a sidebar blogroll section. However, I would recommend doing this only in the case of minor, non-article/content sections of your site where it's not a priority for heading levels to produce a document outline that effectively forms a table of contents.

The best thing to do in all cases is carefully consider the content at hand, and determine the best way to section and label it based on what you now know about the HTML5 document outlining algorithm.


HTML5's New <h1> Usage Rules

Yes, it's true. You can now use as many sets of <h1> tags as are required, via HTML5. But that doesn't mean they should be freely added in arbitrary locations.

Just as there were rules of <h1> tag usage that came from old document outlines, so too are there now new rules based on the HTML5 document outlining algorithm.

Here they are at a glance:

  • Use one set of <h1> tags per sectioning root or content section.
  • There should always be a <h1> level heading between the opening <body> tag and the first content section, to label the overall document.
  • When a <h1> level heading is to be used to label a content section, it should be the first heading that appears in the section, because the first heading is always interpreted as the section's label.
  • If a <h1> level heading is used to label a content section, any other headings used in that section should be H2 or lower in order to create an accurate document outline.

As I mentioned above, section labels don't absolutely have to be <h1> tags. The HTML5 spec permits any heading tag to act as the label for a section, from <h1> through to <h6>. Again however, I always recommend using <h1> level tags to markup article content.

But if you do decide to use a tag other than <h1> for a section label, just ensure you follow the same rules as listed above, replacing <h1> in each rule with your chosen tag.


About Sectioning Content Element Tags

There are only four sets of element tags you can use to denote content sections within your webpage, but they can be a little tricky to wrap your mind around at first.

They are:

  • <article>
  • <section>
  • <nav>
  • <aside>

The two you are likely to use the most are <article> and <section> tags. They are similar to one another, but with an important distinction.

<article> tags should be used where a piece of content could be taken out of a page completely and still make sense by itself with no surrounding content.

<section> tags, on the other hand, should be used for content that is grouped together according to a theme, but makes sense only in the context of the content surrounding it.

For detailed examples on how to use each of these tags, take a moment to check out these W3C pages:

<nav> tags are designed to indicate major navigation blocks on a webpage, such as a menu bar or pagination. They shouldn't be applied to regular links, only to significant sections that are wholly dedicated to navigation.

<aside> tags could effectively be described as the "everything else" element for content that is neither article, section nor navigation. W3C prescribes this tag for use when something is tangentially related to the content around it, but is separate from the main content of the page, such as sidebars, blogrolls and so on.

For more information on <nav> and <aside> tags visit:


Quick Tip: Dealing With Taglines

We now know that in HTML5 we can happily use <h1> tags on our site titles in every area of our sites. However, despite it being a common practice, technically speaking <h2> tags shouldn't be used for standalone subheadings or taglines.

W3C has this to say:

h1–h6 elements must not be used to markup subheadings, subtitles, alternative titles and taglines unless intended to be the heading for a new section or subsection.

The reason for this is that the HTML5 document outline always interprets a heading tag as beginning a new section of content, whether sectioning content tags are wrapped around them or not.

For a while there was a work-around to this whereby <h2> tags could be used for a tagline if they were grouped with the main heading inside a set of <hgroup> tags. However, the <hgroup> is being removed from the HTML5 spec and its use will cause code to fail validation checks.

So now the best way to handle taglines is just to use <div> or <p> tags and apply CSS to make them look like taglines, achieving your presentation goal without negatively affecting your document outline.


Further HTML5 Elements to Employ

In this tutorial we've been focusing on <h1> tags in HTML5 and how the new document outlining algorithm works. For that reason I haven't touched on any HTML5 elements that are not assessed by the document outlining algorithm.

However, I would be remiss if I did not point you in the right direction on a few of the most valuable HTML5 tags you can employ in your markup to make it even more semantically rich.

The <main> Element

The <main> element should be used once per page to indicate the main content area of that page.

If you are displaying a group of articles, it would wrap around all those articles. For example:

<!DOCTYPE html>
<html>
   <head>
      <title>HTML5 markup example</title>
   </head>
   <body>
      <h1>Whackamoon Legumes!</h1>
      <main>
         <article>
            <h1>The proper use of peanuts</h1>
            <h2>How to eat peanuts</h2>
            <p>Peanuts can be eaten with salt.</p>
            <p>This is an acceptable use of peanuts.</p>
            <h3>Superior peanut eating methods</h3>
            <p>Peanuts are infinitely better when combined with chocolate.</p>
            <p>We recommend this approach for best results</p>
            <h2>Incorrect application of peanuts</h2>
            <p>Peanuts should not be used to fill parking meters.</p>
            <p>They will not be effective in this capacity.</p>
         </article>
         <article>
            <h1>Boiling beans</h1>
            <h2>Is boiling beans really worth it?</h2>
            <p>Let's be honest, it takes ages.</p>
            <p>We advise just buying canned beans instead.</p>
         </article>
      </main>
   </body>
</html>

More information: The Main Element

The <header> Element

The <header> element can be used at the beginning of any sectioning root, or content section, to group introductory content for that section.

You could use it to wrap your site title and tagline, or an article title and blog category. For example:

<!DOCTYPE html>
<html>
   <head>
      <title>HTML5 markup example</title>
   </head>
   <body>
      <header>
         <h1>Whackamoon Legumes!</h1>
         <p>We've been luvin beans</p>
      </header>
      <main>
         <article>
            <header>
               <h1>Boiling beans</h1>
               <p>Category: Mean Beans</p>
            </header>
            <h2>Is boiling beans really worth it?</h2>
            <p>Let's be honest, it takes ages.</p>
            <p>We advise just buying canned beans instead.</p>
         </article>
      </main>
   </body>
</html>

More information: The Header Element

The <footer> Element

The <footer> element is basically the inverse of the <header> element, in that it can be used at the end of any sectioning root, or content section, to group supplementary content for that section.

W3C recommends its use for items such as author information, links, copyright messages and so on. For example:

<!DOCTYPE html>
<html>
   <head>
      <title>HTML5 markup example</title>
   </head>
   <body>
      <header>
         <h1>Whackamoon Legumes!</h1>
         <p>We've been luvin beans</p>
      </header>
      <main>
         <article>
            <header>
               <h1>Boiling beans</h1>
               <p>Category: Mean Beans</p>
            </header>
            <h2>Is boiling beans really worth it?</h2>
            <p>Let's be honest, it takes ages.</p>
            <p>We advise just buying canned beans instead.</p>
            <footer>
               <a href="../">Back home...</a>
            </footer>
         </article>
      </main>
      <footer>
         <p>Copyright Whackamoon Legumes 2013</p>
      </footer>
   </body>
</html>

More information: The Footer Element


Wrapping Up

In conclusion, let's take a look at our original business website example and see how it could now be marked up using what we have learned:

html5markup

This simple example shows just how easy it is to use an understanding of the HTML5 document algorithm to solve the old problems surrounding use of <h1> tags, and to ensure the content of your webpages is more accurately communicated than ever before.

Recommended reading

Recommended tools

  • Headings Map 2.0.5 for Firefox - "The extension generates a documentmap or index of any web document structured with headings or with sections in HTML 5. It shows the headings structure, the errors in the structure (ie. incorrect levels), and it works as HTML5 Outliner too."
  • HTML5 Outliner for Chrome - "This extension is using the HTML5 outline algorithm to create a table of contents. The table of contents is clickable and tries to highlight the heading/section in question after the jump."
Advertisement