Pin Me

How to Make a Website Table of Contents

written by: S. R. Obbayi•edited by: Amber Neely•updated: 5/19/2011

A table of contents for a website is quite relevant today, especially when publishing HTML copies of books, tutorials, papers, instruction manual, and many more. Here is a walk-through on how to make such a structure.

  • slide 1 of 3

    Table of Contents For a Single Page Layout

    toc single In this section you will learn how to make a website table of contents for a single page layout, designed for ease of use and portability. All the content is hosted in a single HTML file which can easily be moved back and forth between computers and across all platforms. They are simple documents with minimal cross links between the different sections therefore making the document easy to read in a top-down sweep. In your preferred HTML editor, simply modify the code below to suit your needs. The actual table of contents in this type of document is located at the top and should be in the form of an ordered list with URL anchors as the list items which point to anchor names as in the example below which includes sub-sections as well.

    <h1>Table of Contents</h1>

    <ol>

    <li><a name="top"></a><a href="#one">Contents Item One</a> </li>

    <li><a href="#two">Contents Item Two</a> </li>

    <ol>

    <li><a href="#twoa">Sub-content Item A</a> </li>

    <li><a href="#twob">Sub-contents Item B</a> </li>

    </ol>

    <li><a href="#three">Contents Item Three</a> </li>

    </ol>

    As for the target content that the table of contents item links to should have the following format consisting of a heading and a paragraph with the heading test marked as an anchor. It is also good to include a “Back to Top" link for ease of navigation.

    <h2><a name="one"></a>Content One Heading</h2>

    <p>... content comes here … </p>

    <a href="#top">Back to Top</a>

    <h2><a name="two"></a>Content Two Heading</h2>

    <p>... content comes here …

    <h3><a name="twoa"></a>Sub-content A Heading</h3>

    <p>... sub-content A comes here … </p>

    <h3><a name="twob"></a>Sub-content B Heading</h3>

    <p>... sub-content B comes here … </p>

    </p>

    <a href="#top">Back to Top</a>

    <h2><a name="three"></a>Content Three Heading</h2>

    <p>... content comes here … </p>

    <a href="#top">Back to Top</a>

  • slide 2 of 3

    Table of Contents For a Multiple Page Layout

    This section shows you how to make a table of contents for multiple page layouts, which are suitable for huge documents with several hundreds or thousands of pages but more importantly where these pages cross link back and forth. These are also suitable where the user may want to print important content and therefore will not have to figure out what page number to choose while printing or saving the document.

    Table of contents for multiple page layouts are also suitable for situations where the document can be extremely heavy due to rich graphics and therefore the author of the document may want to split it into smaller bite sized chunks. To implement the table of contents for multiple page layouts, you will need to make a few changes to the base code from the above section. The difference here is that each of the target sections will be placed in their own files and the “Back to Top" links will instead point back to the table of contents. The table of contents itself will be placed in its own file and will point to specific pages for specific content. The content items themselves will become anchors for returning to the table of content page and to the right section. See the modifications below and take note of the added anchors and change in file names marked in bold:

    toc.html

    <h1>Table of Contents</h1>

    <ol>

    <li><a name="onetop"></a><a href="one.html#one">Contents Item One</a> </li>

    <li><a name="twotop"></a><a href="two.html#two">Contents Item Two</a> </li>

    <ol>

    <li><a href="two.html#twoa">Sub-content Item A</a> </li>

    <li><a href="two.html#twob">Sub-contents Item B</a> </li>

    </ol>

    <li><a name="threetop"></a><a href="three.html#three">Contents Item Three</a> </li>

    </ol>

    Here are the modifications for the content.

    one.html

    <h2><a name="one"></a>Content One Heading</h2>

    <p>... content comes here … </p>

    <a href="toc.html#onetop">Back to Table of Contents</a>

    two.html

    <h2><a name="two"></a>Content Two Heading</h2>

    <p>... content comes here …

    <h3><a name="twoa"></a>Sub-content A Heading</h3>

    <p>... sub-content A comes here … </p>

    <h3><a name="twob"></a>Sub-content B Heading</h3>

    <p>... sub-content B comes here … </p>

    </p>

    <a href="toc.html#twotop">Back to Table of Contents</a>

    three.html

    <h2><a name="three"></a>Content Three Heading</h2>

    <p>... content comes here … </p>

    <a href="toc.html#threetop">Back to Table of Contents</a>

  • slide 3 of 3

    Table of Contents For a Framed Multiple Page Layout

    toc frames The framed multiple page table of contents features a little bit of the single page table of contents and the multiple page table of contents. The framed multiple page table of contents is suitable for huge and complex documents such as API manuals of Software Development Kits and these tend to incorporate huge table of contents that may be structured in a tree layout or may need to be managed in a separate frame. Without the complexities of using a tree structure or a table of contents with hundred if not thousands of entries, I will show you how to make a table of contents using frames.

    Borrowing from above examples, the actual content will be stored in the individual files just like the multiple page table of contents. There is going to be a slight difference here though. The “Back to Table of Contents" anchor will revert back to the way it was for single page table of contents and it will read something like this including other changes in bold:

    one.html

    <h2><a name="one"></a>Content One Heading</h2>

    <p>... content comes here … </p>

    <a href="#one">Back to Top</a>

    The next thing is the table of contents will remain the same only for a simple change to all the links which will point to my target frame. In this case I will call the frame “content". Here is the sample with the changes marked in bold.

    toc.html

    <ol>

    <li><a href="one.html#one" target="content">Contents Item One</a> </li>

    <li><a href="two.html#two" target="content">Contents Item Two</a> </li>

    <ol>

    <li><a href="two.html#twoa" target="content">Sub-content Item A</a> </li>

    <li><a href="two.html#twob" target="content">Sub-contents Item B</a> </li>

    </ol>

    <li><a href="three.html#three" target="content">Contents Item Three</a> </li>

    </ol>

    Finally we put everything together by creating a frame-set to hold all our pages. This can be a file called "index.html" and here is the sample HTML code.

    <frameset rows="100%,100%" cols="20%,80%">

    <frame src="toc.html" name="toc">

    <frame src="one.html" name="content">

    </frameset>