HTML5 headers

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

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

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

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

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

level heading, and one only. Additionally, the rule prescribed that this singular

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

Tag" rule, the homepage of this website has

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,

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:

Why Headings Matter: Document Outlines

Despite the long-time heavy focus on

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