The Hard Facts about Heading Structure

Be sure to read my latest post on this subject, as things have changed. The following is republished from the Tech Times #157. Something I’ve had to get used to in my work as a so-called web technology expert is having my assumptions proven wrong every now and then. Languages like HTML can seem deceptively simple at times, and even after years of experience there can be important lessons left for you to learn. Not long ago I learned a hard lesson about heading structure in HTML, one that I suspect many web designers will also be surprised to learn. In a nutshell, heading structure is independent of document structure in HTML documents. Let’s start with something we can all agree on. If you’re writing an HTML document that is simply an article or other body of text with a single title and a number of subheadings, you should use <h1> for the title and <h2> for the subheadings. If your subheadings themselves contain subheadings, those should be marked up with <h3>, and so on.

<h1>Article title</h1>
<p>Lorem ipsum dolor sit amet...</p>
<h2>Subheading</h2>
<p>Lorem ipsum dolor sit amet...</p>
<h3>Sub-subheading</h3>
<p>Lorem ipsum dolor sit amet...</p>
<h2>Subheading</h2>
<p>Lorem ipsum dolor sit amet...</p>

Looks reasonable so far, right? Now, if this is a typical web page, it will also have some navigation elements, and perhaps some secondary content, such as related forum discussions. Each of these sections of the page will have a heading of some kind, but what heading tag would you use? To some extent, your answer might depend on how you think. If your first reaction is that this additional content is less important than the article, you might write something like this:

<div class="navigation">
  <h2>Navigation</h2>
  <ul>...</ul>
</div>
<div class="article">
  <h1>Article title</h1>
  <p>Lorem ipsum dolor sit amet...</p>
  ?
</div>
<div class="discussion">
  <h3>Related Discussion</h3>
  <ul>...</ul>
</div>

This wouldn’t be an unreasonable assumption to make, and certainly the W3C’s HTML Validator would be perfectly happy with it, but in fact it seriously hurts the accessibility of your site. The W3C’s Web Content Accessibility Guidelines 1.0 (WCAG) clarifies this in its discussion of section headings:

[I]n HTML, H2 elements should follow H1 elements, H3 elements should follow H2 elements, etc. Content developers should not “skip” levels (e.g., H1 directly to H3).

So in fact, because the navigation, article, and related discussion are all at the same level within the structure of the page (whatever their relative importance), they should all begin with <h1> headings. Taking the example further, the page will probably have some kind of top-level heading or logo with the name of your site in it. Clearly this should be marked up with an <h1> tag, but how does this affect the rest of the document? Here’s where the hard lesson that I recently learned comes in. I had come to think of the <div> tag as a tool for dividing up a document into “sub-documents”. Following this line of thinking, you might be tempted to do something like this:

<h1>My Site</h1>
<div class="navigation">
  <h1>Navigation</h1>
  ?
</div>
<div class="article">
  <h1>Article Title</h1>
  ?
</div>
<div class="discussion">
  <h1>Related Discussion</h1>
  ?
</div>

Because each heading in the above code is the top-level heading within the <div> tag that contains it, it might seem sensible to use <h1> for every one. This can be particularly tempting if you’re using a content management system of some kind to write the article content separately, and then insert it into the page dynamically. When working on the article in isolation, the article’s title is the top-level heading, so using an <h1> seems to make sense. When you place that article in the context of a full web page, however, that is no longer the case. Although they can add structure to your document that you can use when applying styles with CSS, <div> tags and other block-level elements do not have a bearing on the heading structure of your document. From WCAG 1.0 again:

Sections should be introduced with the HTML heading elements (H1-H6). Other markup may complement these elements to improve presentation (e.g., the HR element to create a horizontal dividing line), but visual presentation is not sufficient to identify document sections.

Because assistive technologies like screen readers allow users to navigate through a document by its heading structure, your headings need to form a sensible structure independent from the rest of your document markup. So in our example above, each section of the page should begin with <h2>:

<h1>My Site</h1>
<div class="navigation">
  <h2>Navigation</h2>
  ?
</div>
<div class="article">
  <h2>Article Title</h2>
  ?
</div>
<div class="discussion">
  <h2>Related Discussion</h2>
  ?
</div>

To test the heading structure on your own site, you can use the W3C’s Semantic Data Extractor to view the outline of your document, based on its heading structure. You’ll note that the front page of SitePoint doesn’t do too well on this test, so don’t feel too bad if your site doesn’t hold up on this front either. It just goes to show that I’m not the only one at SitePoint who has learned this lesson the hard way. You can bet that this will be fixed in the next redesign of sitepoint.com! Be sure to read my latest post on this subject, as things have changed.

Frequently Asked Questions (FAQs) about Heading Structure