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

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