How to Add Table of Contents on Website | HTML Code Example

Do you want to add a table of contents on website?

In this tutorial, you will find complete HTML and CSS code for Table of Contents. You can just add it to your webpage. It’s simple.

In the latter part of this tutorial, you will also learn how you can increase website ranking in Google search to drive more traffic to your website, using the simle Table of Contents.

Before that, if you are not aware of the Table of Contents,

What is the Table of Contents (ToC)?

If you open any textbook, you can find a page at the beginning of the book which outlines all the topics. By looking at the outline, we can see what are all the topics covered in the book.

Similarly, we can add Table of Contents to our webpage. It will show all the contents covered in our blog post.

Unlike the textbook, in the webpage, we can internally link each of the element in the ToC to the webpage content. By clicking on it, we can jump to any topic.

We can add ToC in webpages by both manually and automatically.

Sometimes, it is also called a reference table.

Let’s see how does it work.

How to add a Table of Contents on Website manually?

ToC consist of internal links.

What is Internal Link in HTML?

• An internal link is a link which points within the webpage content itself.
• When you click on the link anchor text, the webpage will be scrolled to the content where it is pointing.
• Internal link starts with the “#” keyword.

HTML code Example:

Anchor for internal link:

<a href="#need">Why there is need to establish the connection to the transfer message?</a>

This link will point to

<h4 id="need">Why there is need to establish the connection to transfer message?</h4>

Here “id” value should be the same as “# link”.

When you add multiple internal links linked to subtopics in your article, it forms Table of Contents.

Best way to insert a table of contents on website is, list out all the subheading in the article as ToC. Link each list element to the subheading.

Check basic HTML tags for creating a list.

This is how it looks like.

When you click on the first link in the ToC, web address will be change to

https://www.csestack.org/difference-connection-oriented-connectionless-services-protocol/#need

The “#” link is concatenated to the original webpage link.

You can add CSS code to decorate your table of the content block.

How to Add ToC Automatically in WordPress?

If you are using a WordPress blog, you can find a plugin that automatically adds ToC for you. You don’t need any coding experience.

One of the popular WordPress plugins is the Easy Table of Contents. You just need to install it in your blog and activate it. It will list out all the subheading in the table of contents.

Why is the Table of Contents Important for SEO?

If you are writing long content, it is always recommended to add TOC.

Whenever you write an article on your website, you want it to reach out to maximum people. Writing ToC for long content serve this purpose.

There are two main advantages of writing the ToC table at the beginning of your article.

• Enhance User Experience:
  As your content is long, adding ToC will help the user to understand the structure of the content. User can put the glance and jump to any particular and interesting topic, without going through complete content. It saves the user time.
• SEO Optimization:
  ToC can help you to boost your website in Google search. When Google crawls your webpage having ToC, Google takes note of it. ToC structure will help Google to understand the topics you have covered in your article. You can see your website is ranking for every topic and keywords you have mentioned in the ToC.

When I search “difference between connection oriented and connectionless”, you can see the CSEstack.org webpage is ranking at the top of the Google search.

It also lists out some of the relevant internal links from the post content.

Google is getting smarter 😉 You have to learn and adapt yourself to steal more traffic to your website from Google search.

Final Word:

Most of the developer gets confused in “table of content” or “table of contents”- which one is correct? Later one. This is a silly mistake.  Don’t make it count.

This is all about simple tricks for inserting a table of contents on website. You can either add it manually or automatically (for WordPress blog).

If you find any difficulty in adding Table of Content to your webpage, write in the comment.

Aniruddha Chaudhari

I am a Python enthusiast who loves Linux and Vim. I hold a Master of Computer Science degree from NIT Trichy and have 10 years of experience in the IT industry, focusing on the Software Development Lifecycle from Requirements Gathering, Design, Development to Deployment. I have worked at IBM, Ericsson, and NetApp, and I share my knowledge on CSEstack.org.