posts/HTML5_outlines.mdwn

   1 [HTML5][] has a well-defined [outline algorithm][algo] (there's a nice
   2 overview at [html5 doctor][html5doc]).  Since browsers don't seem to
   3 support an [outline view][view] yet, I decided to embed an
   4 automatically-generated outline in a webpage using JavaScript.  Thanks
   5 to the [HTML5 outliner (h50) project][h5o], this is fairly
   6 straightforward.  However, I couldn't find an example on their site,
   7 so here's a recipe to get you started.
   8
   9 Download the outliner javascript:
  10
  11     $ wget http://h5o.googlecode.com/files/outliner.0.5.0.62.js
  12
  13 or get the most recent version from the [h5o download page][download].
  14 Then, start your page off with something like:
  15
  16     <!DOCTYPE html>
  17     <html>
  18     <head>
  19       <script type="text/javascript" src="outliner.0.5.0.62.js"></script>
  20       <script type="text/javascript">
  21         var createLinks = true;
  22         var init=function()
  23         {
  24           var outline = HTML5Outline(document.body);
  25           var html = outline.asHTML(createLinks);
  26           document.getElementById('nav').innerHTML = html;
  27         }
  28       </script>
  29     </head>
  30     <body id="body" onload="init();">
  31     <header>
  32     <h1>PAGE TITLE</h1>
  33     <nav id="nav">
  34       <script type="text/javascript">
  35         document.write('<h2 style="display: none">Table of Contents</h2>')
  36       </script>
  37     </nav>
  38     </header>
  39
  40     <h2 id="s1">FIRST SECTION</h2>
  41
  42 Important points:
  43
  44 * The `<nav>` section is populated using JavaScript.  If JavaScript is
  45   available, we get a nice table of contents.  If JavaScript is not
  46   available, we go right from the page header to the first content
  47   section.
  48 * The `<nav>` title (`Table of Contents`) is hidden using CSS
  49   (`display: none`), since its role is fairly obvious.  However, if
  50   you leave out the nav header entirely, the `<nav>` entry the table
  51   of contents will end up with an automatically generated title.  For
  52   [Firefox][] 8.0, that means `Untitled NAV`.
  53 * The `<nav>` title is inserted using [document.write][], so that
  54   browsers which support neither JavaScript nor CSS (e.g. [w3m][])—and
  55   therefore cannot generate the table of contents—will not display the
  56   `Table of Contents` header.
  57
  58 [HTML5]: http://dev.w3.org/html5/spec/
  59 [algo]: http://dev.w3.org/html5/spec/headings-and-sections.html#outlines
  60 [html5doc]: http://html5doctor.com/outlines/
  61 [view]: http://www.w3.org/TR/2002/REC-UAAG10-20021217/guidelines#tech-provide-outline-view
  62 [h5o]: http://code.google.com/p/h5o/
  63 [download]: http://code.google.com/p/h5o/downloads/list
  64 [Firefox]: http://www.mozilla.org/en-US/firefox/new/
  65 [document.write]: http://dev.w3.org/html5/spec/dynamic-markup-insertion.html#document.write
  66 [w3m]: http://w3m.sourceforge.net/
  67
  68 [[!tag tags/web]]