Skip to content
Beautiful Table of Contents

Create a Beautiful Table of Contents

The Table of Contents serves as an index page for online articles and blog posts. It gives a brief introduction of what are the main topics and makes it easier to navigate between sub-topics and allows the user to skip directly to the preferred information they came looking for.

Structure of a Table of Contents

  1. A heading/title appears first
  2. Link to all Headings/Topics
  3. Link to Sub-Headings/Sub-Topics

It is not necessary to include all headings and sub-headings, we can add and remove them as we wish. Look at the example below,

Table
Table of Contents at matrixread

Advantages of Table of Contents

  • Easy Navigation/ Skip directly without any hassle
  • Search Engine Optimization SEO Booster.

Easy to Navigate

The above image is the design of the Table of Contents which we use at matrixread. I knew, I need a Table of Contents for good SEO [search results], and help users navigate easily. But, that doesn’t mean I want it to look different, that is why I added some gradients and styling to it and I’m very happy with it, many asked for the code too. Don’t worry I’ll share the full code and demo below.

Good for SEO

Search Engine Optimization plays an important role in ranking our articles and content in the web, the better we do it the better ranking and visitors.

Look at Wikipedia’s search results

index
Image Credit: Wikipedia and Google

Table inside the above page

Table of Contents
Image: Wikipedia

Table of Contents is not the pillar for Search Engine Optimization but it definitely adds some juice to it.

What are the links in the table?

Usually, a HTML link points to an external website/page but the Table of Contents uses anchor tags on the same page.

<h2>My Selenium Project</h2>

Below is an example,

The first is the link and the second one is the heading it points to

<a href=matrixread.com/learn/#0-my-selenium-project>My Selenium Project</a>

<h2 id=#0-my-selenium-project>My Selenium Project</h2>

Below is the code we use at matrixread.com

Automatic Table of Contents

Using a jQuery script or any other script it is possible to automate the TOC for each page by finding all the Headings of level and others as required but the only problem is there are some cases where we won’t be needing some topics in the table and if it’s automatic it’s not possible to filter them out.

Table of Contents for WordPress

Here are some of the popular plugins

You can choose any of the above or if you are already using something, we can add some styles[CSS] and make it look Beautiful.

Conclusion

If you are planning to use a table make sure it doesn’t affect the UI and is easy to customize based on our needs.