HTML5 has a well-defined outline algorithm (there's a nice overview at html5 doctor). Since browsers don't seem to support an outline view yet, I decided to embed an automatically-generated outline in a webpage using JavaScript. Thanks to the HTML5 outliner (h50) project, this is fairly straightforward. However, I couldn't find an example on their site, so here's a recipe to get you started.

Download the outliner javascript:

$ wget http://h5o.googlecode.com/files/outliner.0.5.0.62.js

or get the most recent version from the h5o download page. Then, start your page off with something like:

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="outliner.0.5.0.62.js"></script>
  <script type="text/javascript">
    var createLinks = true;
    var init=function()
    {
      var outline = HTML5Outline(document.body);
      var html = outline.asHTML(createLinks);
      document.getElementById('nav').innerHTML = html;
    }
  </script>
</head>
<body id="body" onload="init();">
<header>
<h1>PAGE TITLE</h1>
<nav id="nav">
  <script type="text/javascript">
    document.write('<h2 style="display: none">Table of Contents</h2>')
  </script>
</nav>
</header>

<h2 id="s1">FIRST SECTION</h2>

Important points:

  • The <nav> section is populated using JavaScript. If JavaScript is available, we get a nice table of contents. If JavaScript is not available, we go right from the page header to the first content section.
  • The <nav> title (Table of Contents) is hidden using CSS (display: none), since its role is fairly obvious. However, if you leave out the nav header entirely, the <nav> entry the table of contents will end up with an automatically generated title. For Firefox 8.0, that means Untitled NAV.
  • The <nav> title is inserted using document.write, so that browsers which support neither JavaScript nor CSS (e.g. w3m)—and therefore cannot generate the table of contents—will not display the Table of Contents header.