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 meansUntitled 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 theTable of Contentsheader.