How to Create a Table of Content on Hashnode

Subscribe to my newsletter and never miss my upcoming articles

Adding a table of contents in a blog post is a good way to let your readers know in a nut shell the content of your article and also avails them the opportunity to skip to a particular section of the article with just one click should they wish to do so.

For instance, you can decide to skip to the conclusion of this article, if you feel you already have an idea of what I'm writing about😎

In this article, I'll be showing you how to create a table of content for your articles which can be used to skip to certain sections of your post.

Step 1

So, the first thing to do is to preview your article, by clicking on the preview button right on top of your draft page.

hashnode.PNG

Step 2

Select the heading you'd love to skip to, right click and select inspect (if you're on chrome). This will launch you to the developer tools.

hashn.PNG

Step 3

In the image above, you'd see that the heading selected (Step 1) has a unique ID, copy this and save somewhere close.

Step 4

Go back to your table of content, select the list you'd love to link, click on the link tool right on top of your page and insert the id you just copied into the area that says (link)

Let's do this vividly, to achieve the link below,

First list out this content

hash.PNG

Then go ahead and select its texts, after which you click on the link icon right on top of your editing page.

ha.PNG

Enter, the id you copied previously into the area were you have [link]. Append a # before pasting the id.

You'd have this

has.PNG

Repeat this process for every other content in your table. Preview. Your table of content is all set.

Conclusion

We just looked at how to add table of content in the articles you post on your hashnode powered blogs. I look forward to seeing you add them in your next article.

Enjoyed the article? Follow me on twitter

Chris Bongers's photo

Nice, simple but effective! Great addition. Perhaps ask for a Feature request, to make it even simpler?

Edgar John's photo

Great stuff and they're about to add in some custom css so smooth scrolling!

Jordan Craig's photo

Another option is to add your own anchor elements to the end of a heading.

## Introduction <a id="intro"></a>

Then you can add the link to your contents using the id that you specified. This way you can easily add a link back to the contents on really long articles.

## Introduction <a id="intro" href="#contents"> &#x2934;</a>

For this to work, you just need to add an anchor element with an id of 'contents' to your contents. The &#x2934; is a code for a return arrow symbol ⤴.

Amarachi Emmanuela Azubuike's photo

I'll try this one out. Thanks for sharing.

Prateek Aher's photo

This is a simple yet awesome HTML hack. I would have never guessed it. Thanks Amarachi Emmanuela Azubuike

Amarachi Emmanuela Azubuike's photo

I'm glad you found it useful

Sai Laasya Vabilisetty's photo

Should say great timing!! I am struggling to create this and found your article. Really made it easy for me.🥰

Amarachi Emmanuela Azubuike's photo

Aww... I'm glad you found it useful

Jome Favourite's photo

Nice but here is a better way I found.

### Table of Content
- [Step 1](#step1)

## Step 1 <span id="step1"></span>
Amarachi Emmanuela Azubuike's photo

Pretty much the same. Thanks for sharing.