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
To create a table of contents as a list of nested lists, from the heading elements found in a page.
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.
No style rules are necessary, normal lay-out of
<li> elements assuming. If you wish, styles can be used to clarify the different heading levels. The script is .
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 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 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
The script works with most modern-day browsers that support for DOM2 methods such as
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.
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.
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
Once it is decided to display the list next to the actual content, there is still a choice to be made concerning its alignment.
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.