[HTML5][] has a well-defined [outline algorithm][algo] (there's a nice overview at [html5 doctor][html5doc]). Since browsers don't seem to support an [outline view][view] yet, I decided to embed an automatically-generated outline in a webpage using JavaScript. Thanks to the [HTML5 outliner (h50) project][h5o], 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][download]. Then, start your page off with something like:

PAGE TITLE

FIRST SECTION

Important points: * The `

` 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 `

` 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 `

` entry the table of contents will end up with an automatically generated title. For [Firefox][] 8.0, that means `Untitled NAV`. * The `

` 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. [HTML5]: http://dev.w3.org/html5/spec/ [algo]: http://dev.w3.org/html5/spec/headings-and-sections.html#outlines [html5doc]: http://html5doctor.com/outlines/ [view]: http://www.w3.org/TR/2002/REC-UAAG10-20021217/guidelines#tech-provide-outline-view [h5o]: http://code.google.com/p/h5o/ [download]: http://code.google.com/p/h5o/downloads/list [Firefox]: http://www.mozilla.org/en-US/firefox/new/ [document.write]: http://dev.w3.org/html5/spec/dynamic-markup-insertion.html#document.write [w3m]: http://w3m.sourceforge.net/ [[!tag tags/web]]