• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Tips and Tricks HQ

  • Home
  • Projects
    • All Projects
    • Simple WP Shopping Cart
    • WP Express Checkout Plugin
    • Accept Stripe Payments
    • WP Download Monitor
    • Easy HTTPS Redirection
    • WP Security and Firewall Plugin
    • WP eStore Plugin
    • WP Affiliate Platform
    • WP eMember
  • Products
    • All Products
    • Checkout
  • Support
    • Support Portal
    • Customer Only Forum
    • WP eStore Documentation
    • WP Affiliate Software Documentation
    • WP eMember Documentation
  • Contact

Simple Table of Contents (ToC) Using Pure HTML and CSS Code

Home » Blog » Simple Table of Contents (ToC) Using Pure HTML and CSS Code

Last updated: December 5, 2017





For one of my blogs, I needed a simple and clean Table of Contents (ToC) implementation that uses pure HTML and CSS only (no plugins or JavaScripts). I can then manually add the ToC into any page where I want to show it. This method has the benefit of not having to load any JS files on every page of the site. More importantly, I don’t have to maintain any JavaScript code for it.

Most of the tutorials on this topic uses a solution that involves using JavaScript or a Plugin. In this tutorial I will explain how I created a simple table of contents that look like the following screenshot using only HTML and CSS. You should be able to copy and paste most of the code. However, you do have to understand CSS and HTML code a little to utilize this.

example-table-of-contents-created-using-html-css

The CSS Code for the ToC

Add the following CSS code in your theme’s stylesheet file. Alternatively, you can inject this CSS code using a custom CSS plugin like this one.



#toc_container {
    background: #f9f9f9 none repeat scroll 0 0;
    border: 1px solid #aaa;
    display: table;
    font-size: 95%;
    margin-bottom: 1em;
    padding: 20px;
    width: auto;
}

.toc_title {
    font-weight: 700;
    text-align: center;
}

#toc_container li, #toc_container ul, #toc_container ul li{
    list-style: outside none none !important;
}

The HTML Code for the ToC

Now that the CSS code is in place, you can use simple HTML code like the following example to create a ToC in any page.

You are basically making a list of links that are in the page.

<div id="toc_container">
<p class="toc_title">Contents</p>
<ul class="toc_list">
  <li><a href="#First_Point_Header">1 First Point Header</a>
  <ul>
    <li><a href="#First_Sub_Point_1">1.1 First Sub Point 1</a></li>
    <li><a href="#First_Sub_Point_2">1.2 First Sub Point 2</a></li>
  </ul>
</li>
<li><a href="#Second_Point_Header">2 Second Point Header</a></li>
<li><a href="#Third_Point_Header">3 Third Point Header</a></li>
</ul>
</div>

Now, assign the “id” parameter in your heading tags to connect the links from the above list. The following example shows how you can assign an “id” to any heading tags in your page.

<h2 id="First_Point_Header">First Point Header</h2>

That should do it.

Related Posts

  • How to Use Firebug to Modify Your WordPress Site’s CSS (Video Tutorial)
  • Basic Guide to CSS
  • Upgrading the Core WordPress Custom Menu Widget
  • Adding Your Own Custom Fields in the Software License Manager Plugin

Blog Setup,  Web Development CSS,  CSS Usage,  PHP,  wordpress developer tutorial,  WordPress tutorial,  WordPress Tweaks

Reader Interactions

Comments (9 responses)

  1. admin says:
    January 3, 2020 at 1:51 am

    @Lillian, You can try the following CSS tweak. It should put some extra padding for the list items.

    #toc_container li {
    padding: 5px 10px !important;
    }

  2. Lillian Cates says:
    January 2, 2020 at 1:38 pm

    I am running into an issue with a floating header, how would I edit this in CSS so that the anchors have a little padding when linked?

  3. admin says:
    December 10, 2019 at 12:26 am

    @Nima, Below is an example CSS tweak that will make the color of the links red:

    #toc_container a {
    color: red;
    }

  4. Nima says:
    December 9, 2019 at 10:47 pm

    Hello,

    does anyone know how to change the color of the links? I use .toc_list but the color doesn’t change. It uses the same colour as my post links. They are bright red so I am trying to change them for the TOC only. Please help. I’m using WordPress.

  5. Kris Regmi says:
    April 29, 2019 at 2:20 am

    Nice! Easy and a simple code to get a proper Table Of Content. It’s output is though similar to TOC+ Plugin

  6. BigBadaBoom says:
    October 27, 2018 at 2:21 pm

    Hi! You can use only parent selector (#toc_container ul) in your css for list-style. It’s inherited property. https://developer.mozilla.org/en-US/docs/Web/CSS/list-style#Specifications

  7. Resultwa says:
    June 21, 2018 at 12:36 am

    Easy and clean code for simple yet meaningful table of content.
    It would be more helpful if you make a WordPress plugin for the same.

  8. admin says:
    August 7, 2017 at 7:11 pm

    @Pooja, It uses standard CSS and HTML code so it should work there also.

  9. Pooja Hegde says:
    August 7, 2017 at 8:08 am

    Thank you so much for the code!

    Can we use the same for blogger blog?

Leave a Reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Featured & Popular Articles

Video Answers to Top WordPress QuestionsWordPress Optimization Tips and Tricks for Better Performance and SpeedEssential WordPress Security Tips - Is Your Blog Protected?WordPress Simple PayPal Shopping Cart PluginTop 15 Search Engine Optimization (SEO) Techniques I Forget to DoList of the Best and Must Use WordPress PluginsHow do I Start a Blog and Make Money Online?Good Domain Name Picking Tips for Your Blog SetupFind Out Which WordPress Web Hosting Company Offers the Cheapest and Reliable Web Hosting Solution

Featured WordPress Plugins

WP Express Checkout Plugin
wordpress estore plugin
wordpress membership plugin
wordpress affiliate plugin

Recent Posts

  • How to Use Browser Developer Tools to Inspect Elements and [...]
  • Accept Donations via PayPal from Your WordPress Site Easil [...]
  • Buy Now Button Graphics for eCommerce Websites [...]
  • Subscription Button Graphics for eCommerce Websites [...]
  • Adding PayPal Payment Buttons to Your WordPress Sidebar Ea [...]

Comment & Socialize

  • @Rob, We have just released ...
    - admin
  • I installed the plugin a co ...
    - Rob
  • @Sebastian, We've released ...
    - admin
  • I've used this plugin on a ...
    - Sebastian Djupsjöbacka
  • @John, this plugin doesn't ...
    - admin

Check out our solutions

View our WordPress plugin collection and start using them on your site.

Our WordPress Solutions

Footer

Company

  • About
  • Privacy Policy
  • Terms and Conditions
  • Affiliate Login

Top WordPress Plugins

  • Simple Shopping Cart
  • PayPal Donations
  • WP Express Checkout
  • WP eStore
  • WP eMember

Blogging Tips

  • How to Start a Blog
  • Selecting a Good Domain
  • Cheap WP Hosting
  • WP Video Tutorials
  • Simple SEO Tips

Search


Keep In Touch

Copyright © 2025 | Tips and Tricks HQ