A table of contents

Dynamic Javascript



Through the ages various forms of presentation of clustered content have been devised. The term "Table of Contents" has been in use since the 1800's. In our day, where the <table> tag has become almost synonymous with improper semantics in markup, we would refer to such as a list.
Webpages have in their build more in common with ancient scrolls than with books.

Hence the following

Mission statement

To create a table of contents as a list of nested lists, from the heading elements found in a page.

The forest and the trees

As a thought, a text, a page grows, the structure provided by the various headings can be an important aid by revealing the logic behind the text, to the reader but no less to the author. A contents table is like a synopsis of what follows.


In the head


No style rules are necessary, normal lay-out of <ol> and <li> elements assuming. If you wish, styles can be used to clarify the different heading levels. The script is .


Three functions.

In the body

Heading tags
A h3 is no title

One school of thought sais a document should contain one <h3> element only, preferably at the top, and define sections with <h4> and lesser tags. Others say it is quite acceptable to have multiple headings of the first level.

The title is no h3

The document's title should not be confused with the first heading. It is used in very different places, such as the window's title bar, search engine results, and bookmarks lists. It should provide the subject and its relation to the context, all in maximum about 20 words. The first

The links

The heading elements are given id's by the script that serve as anchors the links in the list can refer to. This allows referencing subsections from outside the document by means of the hash portion of the url.

In this example the anchors are numerical.


No script in the body is necessary. The troublesome document.write() is not used. All actual content is accessible in browsers without Javascript. Web spiders such as Googlebot will note the relevance of the text within a heading element.

The script works with most modern-day browsers that support for DOM2 methods such as document.createElement(), cloneNode() and appendChild().




This page calls the function at the onload event. The waiting time during loading is extended by a second or less, so the user experiences only one period of idleness.

One click away

Allowing the user to generate the Table of Contents at the click of his mousebutton may enhance the interactive. It will also prevent any malfunction in any unknown browser, or needlessly delay navigation when the 'Back' button is used.


Before and after

Ancient scrolls and old books may place a list of chapters before the beginning or after the end. The latter method is considered less logical and userfriendly and is no longer in general use. Perhaps it had grown out of custom when the final structure was not known until the thing had been printed. These days

Left and right

Once it is decided to display the list next to the actual content, there is still a choice to be made concerning its alignment.


Other considerations

Scrolling down


Further down

The last few items in the list . If the content of the last heading takes up less space than the window's height has to offer, that heading will not show up at the very top of the viewport when clicked to, but some of the preceding content above it will remain visible.


  1. Zie M. Luigi Bode, blz. 555 en vgd.
  2. Zie P. Leroy-Beaulieu: "De la colonisation chez les peuples modernes", dl. 11, blz. 459.
  3. Nieuwe Rotterdamsche Courant, 23 September 1908.
  4. Zie: Dr. Alfred Zimmermann, blz. 141-173.
  5. Zie H. Gottwaldt, blz. 1-13.