How to create a table of content in HTML ?

About

This page talks about the creation of a Table of content in html.

Example

The TOC is created generally with a nav element net below the header of your article (ie main content).

<article>
    <header>
        <h1>Title Article</h1>
        <p>Written by Foo.</p>
    </header>
    <nav>
        <ul>
            <li><a href="#section1" target="_parent">First Section</a></li>
            <li><a href="#section2" target="_parent">Second Section</a></li>
            ...more...
        </ul>
    </nav>
    <div>
        <section id="section1">
            <h1>First Section</h1>
            <p>...more...</p>
        </section>
        <section id="section2">
            <h1>Second Section</h1>
            <p>...more...</p>
        </section>
        ...more...
    </div>
    <footer>
        <p><a href="?edit">Edit</a> | <a href="?delete">Delete</a> | <a href="?Rename">Rename</a></p>
    </footer>
</article>

Creation

The table of content can be added to the HTML page at:

• creation time
• or at load time via a javascript library (example: Tocbot)

At load time, the library or a search engine would get/extract the table of content data from the outline.

Check

To check that your Table of Content is the same than the one that would view a library or a search engine, you can check your outline