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
- A heading/title appears first
- Link to all Headings/Topics
- 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,
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
Table inside the above page
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.