HTML5 document outline revisited

Since posting HTML5 sectioning elements, headings, and document outlines I’ve received a fair amount of feedback about my reasoning.

None of the feedback I got has made me change my mind about how to use the sectioning elements in HTML5. So going forward, these are my conclusions.

Untitled sections in the document outline

Most responses about untitled sections have been along the lines of “So? The spec doesn’t require sections to have a heading and it’s up to user agents to announce/display untitled sections in a useful way.”

I agree that untitled sections are probably not a showstopper, but to me they make a document feel… incomplete. My opinion is that if you can avoid them, do so. If there is no natural heading for that section you are about to create, ask yourself if it really should be a section. If you can fix the outline yourself, why rely on user agents getting it right?

Basic HTML structures

I have revised the HTML structure I posted in my previous article just a little bit. I also thought it would be good to have an example of a structure for other kinds of pages, so I worked a bit on that as well.

Single article/document pages

Here’s an HTML structure for pages which contain a single article/document/page:

<body>
	<header>
		<h1>Site title etc.</h1>
		<nav>
			<h2>Main navigation</h2>
			<ul>
				<li><a href="/">Nav item</a></li>
			</ul>
		</nav>
	</header>
	<div id="main">
		<nav>
			<h2>Sub navigation</h2>
			<ul>
				<li><a href="/">Nav item</a></li>
			</ul>
		</nav>
		<h1>Article title</h1>
		<p>Article content.</p>
		<h2>Article sub-heading</h2>
		<p>More content.</p>
	</div>
	<aside>
		<h2>Sidebar heading</h2>
		<h3>Sidebar sub-heading</h3>
	</aside>
	<footer>
		<h2>Footer heading</h2>
		<p>Footer content.</p>
	</footer>
</body>

That gives the following outline (in both HTML4 and HTML5 user agents):

  1. Site title etc.
    1. Main navigation
    2. Sub navigation
  2. Article title
    1. Article sub-heading
    2. Sidebar heading
      1. Sidebar sub-heading
    3. Footer heading

I added a second nav element to hold a sub navigation, which is very common on this type of page on non-blog sites.

Sub-section landing pages and home pages

For sub-section landing pages, home pages or similar with various bits of content but no single main article, I think the following works well:

<body>
	<header>
		<h1>Site title etc.</h1>
		<nav>
			<h2>Main navigation</h2>
			<ul>
				<li><a href="/">Nav item</a></li>
			</ul>
		</nav>
	</header>
	<div id="main">
		<nav>
			<h2>Sub navigation</h2>
			<ul>
				<li><a href="/">Nav item</a></li>
			</ul>
		</nav>
		<h1>Landing page main heading</h1>
		<p>Content</p>
		<h2>A sub-heading</h2>
		<p>Content</p>
		<section>
			<h2>News</h2>
			<p>Content</p>
		</section>
		<section>
			<h2>Products</h2>
			<p>Content</p>
		</section>
		<article>
			<h2>Article heading</h2>
			<p>Content</p>
			<h3>Article sub-heading</h3>
		</article>
		<aside>
			<h2>Sidebar heading</h2>
			<h3>Sidebar sub-heading</h3>
		</aside>
	</div>
	<footer>
		<h2>Footer heading</h2>
		<p>Content</p>
	</footer>
</body>

Here’s the outline for this HTML:

  1. Site title etc.
    1. Main navigation
    2. Sub navigation
  2. Landing page main heading
    1. A sub-heading
    2. News
    3. Products
    4. Article heading
      1. Article sub-heading
    5. Sidebar heading
      1. Sidebar sub-heading
    6. Footer heading

Again, the outline will be the same in HTML4 and HTML5 user agents.

On this type of page using the section and article elements feels more appropriate than on single article pages.

Thanks to the use of multiple heading levels, both of these HTML structures create the same document outline in both HTML4 and HTML5, so there should not be any backwards compatibility problems.

h1 for the site title?

In case you spotted those h1 elements around the site title and think “Hmm, didn’t he use to say that the site title shouldn’t be a heading?”, you’re correct. I still firmly feel that the site title should not be the only h1 on a page. The one exception is the home page, where I think it may be appropriate if there is no natural top level heading, as is often the case with home pages.

For sub pages though, the title of the current page or site section really should be an h1. I’m still a bit on the fence about putting the site title in an h1. However, the responses to the Heading Structures question of WebAIM’s Screen Reader User Survey #3 seem to indicate that doing so may in fact be helpful to screen reader users, as long as the site title is not the only h1. Over half of the respondents picked “Two first level headings, one for the site name and one for the document title” as the page heading structure they find easiest to use.

Add to that the fact that putting the site title in an h1 creates a better looking outline in HTML4 user agents, and I feel that it’s fine to do so.

Conclusion

The outlines here represent my current thinking on this. I’m not entirely sure that it won’t change (the h1 around the site title could very well go at some point), but I do hope that any changes will be pretty small.

Posted on April 12, 2011 in HTML 5, Accessibility