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





Discover More
HTML - (Document) Outline

This article talks: the extraction of the outline from a HTML document in order to create a HTML Table of Content The outline also known as the table of content is a list of one or more potentially...
Html Heading Sequentiel Order
HTML - Heading Content (Section Header) - Heading Elements (H1 to H6)

Heading define the structure / outline / table of content of the document (page) They are defined via: the heading element (h1/h6) via the aria heading role section of the document letter, the...
HTML - Nav element

nav is an element that represents a section of a page whose purpose is to provide: navigation component via links. Group element may be grouped with an aside element. Example is from the...
Card Puncher Data Processing
UI - Table of Content (ToC) / Outline

A table of content or outline is an hierarchical view of a document. It resume all the sections of the document and is therefore an important part of the navigation for the reader. They permits: ...



Share this page:
Follow us:
Task Runner