How to create a table of content in HTML ?


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


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

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


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.


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

Powered by ComboStrap