Table of Contents Examples

This document illustrates a number of popular styles for including a table of contents in an HTML document. It is a good idea to include a table of contents to help navigation through a long document. It may also be used to allow navigation through a set of documents.

Plain Text Table of Contents

One of the simplest styles consists of text separated by bars:

[kayaking gear | sea kayaking | paddle information | kayaking resources ]

You may wish to use bold or italics if there are different levels of importance to portions of the contents:

[new kayaking resources | kayaking gear | sea kayaking | paddle information | kayaking resources ]

Lists are also useful for creating tables of contents:

new kayaking resources
kayaking gear
sea kayaking
paddle information
kayaking resources

Incorporating Images

Images help to make a table of contents more visually appealing. First we show a list with each item in a separate paragraph so that they appear in a column. No image alignment is used:

This document provides information on a number of kayaking topics:

This table of contents is in a PRE element to align the images correctly. However, as tables become more widely implemented, it will be easier to use tables to create a similar look.

kayaking gear

sea kayaking

paddle information

kayaking resources

If you are viewing this document in a browser with table support, you can see how this would look using a table for alignment:

kayaking gear sea kayaking
paddle information kayaking resources

If you look at the source, you will see that the table version is much easier to read than the version that is aligned with the <PRE> tag.

And you can get even fancier with the use of borders:

Kayaking Gear
Sea Kayaking
Kayaking Resources

Paddle Information

Image Maps as Table of Contents

Using an image map as a table of contents minimizes the number of network connections that need to be made to download your document (assuming that the alternative is a separate image for each topic in your table of contents). If you keep your master image small, it should also reduce the total number of bytes that need to be transferred. Remember to provide a text-based alternative should you use an image map as a table of contents since some browers do not support image maps.

The Invisible GIF Trick

What can you do if you like the visual simplicity of a single image map, but want to provide navigational control for readers who are browsing with image loading turned off or are using browsers that do not support image maps? Invisible images provide a way to do this. In this case, invisible images aren't really invisible, but with a size of one pixel they are so small that you don't see them. The image is linked to locations used in your image map. The ALT attribute is used with each image to indicate where the link goes. When a reader views your document with image loading turned on, the invisible images cannot be seen. If the reader is viewing without imagemap support, the ALT attribute is displayed. We provide an example of this technique below. If you are viewing this document with image loading turned off, you should see a list of links below this paragraph. If you have image loading turned on, there should be a horizonal line after this paragraph.