There's some ambiguity and debate around the proper use of the heading tags <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, specifically with the use of sectioning elements, like <article> and <section>. The following sections should help further explain the specification, and help you understand how users using assistive technology will use and depend on your markup.

Sections and Headings

According to the most recent public draft of the W3C HTML 5.1 specification 4.3.3 The section element:
The <section> element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading. Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site's home page could be split into sections for an introduction, news items, and contact information.
4.3.10 Headings and sections states:
Sections may contain headings of any rank, and authors are strongly encouraged to use headings of the appropriate rank for the section's nesting level.
The specification provides 3 valid implementations of headings similar to the following examples described and then demonstrated below:
  1. Example 1 below uses headings of any rank.
  2. Example 2 uses all <h1> elements as the highest ranking heading for each <section>.
  3. Example 3 uses heading elements of the appropriate rank for the nesting level of each <section>.
The 3 examples below, which use <section> and headings as described above, are ONLY visually identical. Use the buttons below to show and hide the markup of each example to see how they differ from one another.

Example 1: Guitars

Guitars are one of the best instruments ever invented. Perhaps they are among the coolest things in existence.

Types

There are several types of guitars. The 2 main types are electric and acoustic, which can then be broken down further to things like classical, hollow body, etc.

Brands

Fender, Gibson, Epiphone, and Taylor are among of the most popular brands of electric and acoustic guitars.

Ability to Rock

Simply holding a guitar increases your level of awesomeness by providing you the ability to rock. The louder the better.

Example 2: Guitars

Guitars are one of the best instruments ever invented. Perhaps they are among the coolest things in existence.

Types

There are several types of guitars. The 2 main types are electric and acoustic, which can then be broken down further to things like classical, hollow body, etc.

Brands

Fender, Gibson, Epiphone, and Taylor are among of the most popular brands of electric and acoustic guitars.

Ability to Rock

Simply holding a guitar increases your level of awesomeness by providing you the ability to rock. The louder the better.

Example 3: Guitars

Guitars are one of the best instruments ever invented.

Types

There are several types of guitars. The 2 main types are electric and acoustic, which can then be broken down further to things like classical, hollow body, etc.

Brands

Fender, Gibson, Epiphone, and Taylor are among of the most popular brands of electric and acoustic guitars.

Ability to Rock

Simply holding a guitar increases your level of awesomeness by providing you the ability to rock. The louder the better.

Articles, Sections, and Headings

According to the specification 4.3.2 The article element:
The <article> element represents a 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.
Additionally, 4.3.3 The section element states:
Authors are encouraged to use the <article> element instead of the <section> element when it would make sense to syndicate the contents of the element.
The following example is a blog starting with heading level <h1> containing 3 entries using both <article> and <section> that follow the specification as described and then demonstrated below:
  1. Entry 1 below uses heading elements of the appropriate rank for the nesting level of the <article> and <section>.
  2. Entry 2 uses <h1> for its title, and then nests the heading level of the <section> belonging to the <article>.
  3. Entry 3 uses all <h1> elements as the highest ranking heading for each article and section.
The 3 entries below, which use <article>, <section>, and headings as described above, are ONLY visually similar. Use the buttons below to show and hide the markup of each entry to see how they differ from one another.

The Awesome Guitar Blog (Example)

  • Entry 1: Increase Your Awesomeness: Get a Guitar

    The sky's alight with a guitar bite, heads will roll and rock tonight, for those about to rock, we salute you. Brian Johnson

    Any guitar will do. Buy one, trade for one, pick one out of the garbage. Researchers find you will be more awesome if you do.

    You Already Feel Awesome Without One?

    It's possible to have some level of awesomeness even you don't own a guitar. Just know you'd be way more awesome if you had one.
    Published on

  • Entry 2: The Fender Stratocaster

    It will be mine. Oh, yes...it will be mine. Wayne Campbell

    The Strat has been showcased by many legends across many genres of music. There are several different models, one of which is known by some as The Excalibur.

    Is Playing Stairway Allowed

    Unfortunately, playing Stairway to Heaven is not allowed on any guitar in most guitar shops around the world.
    Published on

  • Entry 3: The Louder the Better

    ...you better not hook up to the amplifier. There's a slight possibility for overload. Dr. Emmett Brown

    All guitars are great. However, when playing an electric, studies show the louder it is the better it is.

    Is There Such Thing as Too Loud?

    No there is not. However, when playing guitar it is possible to not be loud enough.
    Published on

Thinking in Terms of Accessibility Can Help

All of the examples above use valid markup. So, which one is the best? Typically, the average user doesn't know much or care about your markup and whether or not it's semantically correct as long as it looks awesome and provides the needed content/services. However, users that use assistive technologies, like screen readers, heavily rely on well implemented, structured, and meaningful markup.

Using Assistive Technology to Navigate Through a Page

Regardless of your experience with web accessibility, you've most likely heard that all of your content must be reachable by keyboard, the importance of tab index/order, and the skip to main content link. These are important but about as basic as things get. Specifically screen readers commonly navigate through a site using the following additional techniques:
ARIA landmarks and regions
These allow users to jump directly to portions of page, like the navigation, main body, and banner/header.
Retrieving a list of page links
A list of page links can be useful for pages that have a flat structure with a lot of links, like a home page.
Navigating through the headings
Most screen readers allow the user to navigate through the various heading levels of a page. This can be particularly useful on a page with multiple structured sections.

Heading Structure and Depth

The specification 4.3.6 The h1, h2, h3, h4, h5, and h6 elements states:
These elements represent headings for their sections...These elements have a rank given by the number in their name. The <h1> element is said to have the highest rank, the <h6> element has the lowest rank, and two elements with the same name have equal rank.
Navigating through the <h1> and <h2> elements allows the user to understand the overall pupose of a page and how its content is structured. The <h3> through <h6> elements provide a quick understanding of the details in each section.

Implementation Considerations

While thinking about heading structure consider the following:
  • Having a lot of content that helps define the high level structure of page buried in heading levels 3-6 could prevent users using assistive technologies from understanding a page's purpose.
  • Using mostly level 1 and 2 headings on a page could blur the overall struture and purpose of page for users using assistive technologies.
  • Inconsistently implementing headings from page to page, and even across multiple sites that are part of a suite could create confusion and frustration for users using assistive technologies.
See WCAG 2.0 - Understanding SC 2.4.10 for specific examples of the benefits of using headings to organize content.

An Interactive Understanding

Using various accessibility tools and assistive technologies, like a screen reader are great ways to understand why semantics are important and how different implementations can impact users using assistive technologies.

Tools to Download

Here are a couple tools that will help further explain the importance of good semantic markup:
WAVE Toolbar
WebAIM has an extremely useful site with several great tools and resources. This FireFox add-on is one the most popular and useful tools. Use this tool to help visualize heading structure.
ChromeVox
An easy to use screen reader Chrome extension. It's fairly basic, but a good reader for beginners. Use this on each section below to hear how proper and improper HTML markup are read differently. The list of keyboard shortcuts can be found in this extension's options page.

Things to Try

Use the buttons below to transform the heading structure of this entire page. While each of the structures are valid based on the specification, they will each have their own way of describing the document to a user using assistive technologies. After clicking each button:
  1. Use the WAVE toolbar to view the Outline of the page to visually see the heading structure. Think about how each structure describes the document differently.
  2. Using a screen reader, navigate through the page via the headings. Some screen readers allow users to navigate through headings in mulitple ways. For example, ChromeVox allows users to navigate through headings by level (i.e. Cvox+N>1-6), or in order (i.e. Cvox+N>H). Navigate through the headings in as many ways as possible to further get an understanding of the impact of heading structure.

Note: Because some of the examples in this document use varying heading structures, the buttons below will hide some of the content in order to emphasize the transformed structure. However, the overall high-level structure will remain intact.