ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

Create a Simple Table of Contents Quickly & Easily

Updated on June 10, 2015

Create a custom table of contents

Source

For online content creators

Easily build a custom table of contents

If you write for a site that uses modules to help you organise your articles, it's easy to create your own customised, clickable table of contents. This is essential.

This helps your readers find what they are looking for simply and quickly.

Below you'll find step-by-step instructions, plus the code you need. Simply copy the code, edit it and add to your article.

This might appear a little complex when you read the instructions but the reality is very different. You'll be able to build custom tables of content within just a few minutes.

I promise that this is easier than it looks.

See Step Four if you'd like to get the link to the code with you can copy, adapt and paste into your own article.

Step One

Copy the URL

Open a plain text document such as Notepad. Go to your article online and copy the URL that shows in the address bar.

I'm making four links in my table of contents so the first step is to paste the URL into the document four times, one per line.

See the image below.

Source

Step Two

Add your titles

Alongside the URLs, add the titles of the modules you want to link to. In this example, I'm linking to 1922, Big Driver, Fair Extension and A Good Marriage.

See below that I've added this at the end of the URLs.

Step Three

View the source code of your article

In most browsers, this is simply a case of right clicking your page and then choosing the option to 'view code' or 'view source'. (Be sure not to right click an image as this will give you a different menu).

You'll be taken to a page that will, unless you are familiar with HTML, look like complete gobbledegook. Don't worry.

Use your browser's 'find' function (often CONTROL+F) to locate the title of the module you want to link to. Each module has its own unique number. See the example below.

The title of the first module I need is 1922. You can see that the search function has highlighted in word in yellow You'll also see that close by is the module identifier. I've framed it in a yellow box so that you can see it more clearly.

In this example, the part I need is mod_27254712

Copy this. Add to your document at the end of the URL, preceding it with a hash symbol. See below.

Repeat until you have #mod_number on every URL. See below.

Step Four

Get and edit the code

Click here and copy the code. Add it to your plain text document below the links.

Step Five

Combine the information to create the final code

Use the two pieces of information to create the code.

1. Copy the URL and paste in place of http://yourusername.hubpages.com/hub/your-title

2. Copy and paste the titles in place of Your display text

3. Copy and paste your unique module numbers in place of the example numbers given

Your code will now look like the images below (a one-line version plus an enlarged version for your reference).

Step Six

Add the code to your article

Edit your article. Go to the module in which you would like your table of contents to be (a text box). On the left hand side of the text box editor, you'll see the HTML button. Click that and paste in your code.

Save.

Your links will now look like the image you see on the right. These work and will be a benefit to your readers because they will be able to jump straight to the information they require.

But doesn't it look a little boring?

That's fine because now you can edit it as you would any other text. Here you see an example with bullets added to divide the text.

If you have just a little space in the layout of your articles, leave the links as they are - the bullets help to distinguish them.

If you have more space in your layout, space them on their own individual lines as shown in the screenshot on the right.

Step Seven

Make your table of contents attractive

When you're editing a text box, click on the omega icon which is the fifth from the right on the toolbar. Using this, you can add bullets. But there's more.

Check the symbols to see if there are others which might be more appropriate for your topic or for the look and feel of your article.

For example:

♥ ♦ ‡ ¤ →

There are many more and can make your table of contents truly unique. You can see the symbols in the image below.


The seven easy steps

To recap:

  1. Copy your URL and paste into a plain text document - once for every link you want to make
  2. Alongside each, add the title -the text you'd like to show
  3. View the source code to find the unique ID numbers for each module you want to link to. Paste these into your text document
  4. Grab the code and paste into your document
  5. Copy and paste your own details into the code
  6. Add the code to the HTML of your article
  7. Make your link list more attractive by adding bullets or other symbols.

© 2014 Jackie Jackson

Comments

    0 of 8192 characters used
    Post Comment

    • JamespRichmond profile image

      James Richmond 

      3 years ago from Kent, Washington

      Wow! Spot followed it to the letter,considering its the first time I ever used code lol :) I gave you credit in my "Young Love - Socities Perception on Online Dating and Marriage of a Younger Couple" hub :) Thanks again you seriously rock!

      - James

    • BritFlorida profile imageAUTHOR

      Jackie Jackson 

      3 years ago from Fort Lauderdale

      @TIMETRAVELER2 - That is so strange.It works fine for me.

    • TIMETRAVELER2 profile image

      Sondra Rochelle 

      3 years ago from USA

      I followed every single direction ten times and have not been able to get this to work. Something must be missing in your directions...???

    • Judy Filarecki profile image

      Judy Filarecki 

      3 years ago from SW Arizona and Northern New York

      Thanks so much for the instructions. I have a hub that definitely would benefit from a table of contents and have wanted to do it. I use to know how to do it, but it was a long time ago, so this rally helps.

    • peachpurple profile image

      peachy 

      3 years ago from Home Sweet Home

      clever idea to save the files and this is useful

    • rajan jolly profile image

      Rajan Singh Jolly 

      3 years ago from From Mumbai, presently in Jalandhar,INDIA.

      I did make a table of contents in one of my hub but this one by you seems simpler. I'm going to try it.

      Thanks for sharing. Passed it on, pinned and tweeted as well.

    • BritFlorida profile imageAUTHOR

      Jackie Jackson 

      3 years ago from Fort Lauderdale

      @Arachnea - I'm so glad it's helpful!

    • Arachnea profile image

      Tanya Jones 

      3 years ago from Texas USA

      I recall seeing this ages ago and now see that I hadn't come back to comment. I was looking for it today as I need to make a TOC in an upcoming hub. Great instructions, btw.

    • BritFlorida profile imageAUTHOR

      Jackie Jackson 

      4 years ago from Fort Lauderdale

      Thanks @Shades-of-truth - hope it helps.

    • BritFlorida profile imageAUTHOR

      Jackie Jackson 

      4 years ago from Fort Lauderdale

      Hi @EricaJean - glad it was helpful!

    • Shades-of-truth profile image

      Emily Tack 

      4 years ago from USA

      I have read all of the Hubs about creating a Table of Contents - each one different, each one extremely helpful. Not sure I want to tackle it yet, but each of you have given us helpful ways to successfully accomplish the task. Thanks, BritFlorida.

    • Ericajean profile image

      Ericajean 

      4 years ago

      I've always wanted to create a TOC within my hub , however doing so will take patience on my part. I thank you again for explaining it in detail. Awesome!

    • BritFlorida profile imageAUTHOR

      Jackie Jackson 

      4 years ago from Fort Lauderdale

      Yes,it does take some time. Hopefully this is something that the site gurus will solve in time.Or maybe a special capsule? Thanks for visiting, @ecogranny!

    • ecogranny profile image

      Kathryn Grace 

      4 years ago from San Francisco

      Thanks for this tutorial, BritFlorida. I'm especially glad to find the special character options, because so often I need that for one reason or another.

      Brit, I have a question about the TOC/link list. The way the links work now, the page has to reload every time we click on one of the internal page links. I've tried all the HTML tricks I know to create a jump-style TOC, but HubPages consistently rewrites them so the the page has to reload. Any ideas?

    • BritFlorida profile imageAUTHOR

      Jackie Jackson 

      4 years ago from Fort Lauderdale

      Thank you so much @esmonaco - I really appreciate your comments.

    • esmonaco profile image

      Eugene Samuel Monaco 

      4 years ago from Lakewood New York

      You always have great advise and easy to follow steps. You make this sound so easy. Thanks, I've bookmarked this so I can refer back to it :)

    • BritFlorida profile imageAUTHOR

      Jackie Jackson 

      4 years ago from Fort Lauderdale

      @CherylsArt - they probably will and make my article obsolete :)

    • CherylsArt profile image

      Cheryl Paton 

      4 years ago from West Virginia

      I'll keep this in mind if I ever decide to add one, or maybe HubPages will come up with something in the meantime. : )

    • BritFlorida profile imageAUTHOR

      Jackie Jackson 

      4 years ago from Fort Lauderdale

      @FlourishAnyway - I'm so pleased it helps.Thank you!

    • FlourishAnyway profile image

      FlourishAnyway 

      4 years ago from USA

      Thank you for writing this. I've always wanted to know how to do it.

    • BritFlorida profile imageAUTHOR

      Jackie Jackson 

      4 years ago from Fort Lauderdale

      Hi @MartieG - thanks for dropping by. I'm glad it's useful.

    • BritFlorida profile imageAUTHOR

      Jackie Jackson 

      4 years ago from Fort Lauderdale

      @Margaret - thanks for reading and bookmarking.

    • MartieG profile image

      MartieG aka 'survivoryea' 

      4 years ago from Jersey Shore

      This is one of the first Hubs that I have bookmarked for future reference--thanks for the informative information.

    • Margaret Schindel profile image

      Margaret Schindel 

      4 years ago from Massachusetts

      Thanks so much for this great tut, Jackie! Bookmarked for future reference - I often did something similar in my lenses to create anchor links to certain modules farther down in the lens and I'm sure I'll want to do it on my hubs as well.

    • BritFlorida profile imageAUTHOR

      Jackie Jackson 

      4 years ago from Fort Lauderdale

      @pawpawwrites - thanks for dropping by! The tutorial is here whenever you need it :)

    • BritFlorida profile imageAUTHOR

      Jackie Jackson 

      4 years ago from Fort Lauderdale

      Thanks @shay-marie - I'm so pleased that this is useful to you.

    • Pawpawwrites profile image

      Jim 

      4 years ago from Kansas

      Thanks for the nifty tutorial. Right now I'm keeping it basic, but I will keep this in mind for future reference.

    • shay-marie profile image

      Shay Marie 

      4 years ago from Southern California

      I never thought of coding my own table of contents, but you made it look really simple. I'll have to come back to this.

    • BritFlorida profile imageAUTHOR

      Jackie Jackson 

      4 years ago from Fort Lauderdale

      Thanks so much! It's good to know how to make these, even for sites that do provide a table of contents module. This way, we can customise them to suit our articles.

    • Brite-Ideas profile image

      Barbara Tremblay Cipak 

      4 years ago from Toronto, Canada

      this will come in very handy! thank you Jackie - bookmarking!

    • BritFlorida profile imageAUTHOR

      Jackie Jackson 

      4 years ago from Fort Lauderdale

      Hi Giovanna - good to see you! It's all copy & paste - no code learning required :)

    • Adventuretravels profile image

      Giovanna 

      4 years ago from UK

      Thanks Jackie I can't wait till I get to this stage. Merry I'm gulping too - learning code is way down my list of things to do!!

    • BritFlorida profile imageAUTHOR

      Jackie Jackson 

      4 years ago from Fort Lauderdale

      @Nancy - I promise that it's easier than it looks. I know that you can figure it out in no time :)

    • BritFlorida profile imageAUTHOR

      Jackie Jackson 

      4 years ago from Fort Lauderdale

      @aka-rms - thanks for dropping by.I'm glad that it's useful.

    • Nancy Hardin profile image

      Nancy Carol Brown Hardin 

      4 years ago from Las Vegas, NV

      I don't know how you can figure this out. It's all "greek" to me, and I admire you for your ability. By the time you got to the third step I was lost! If it's something I can't plug in with one action, I get confused! Brilliant work here!

    • aka-rms profile image

      Robin S 

      4 years ago from USA

      Bookmarking this for later. Thanks.

    • BritFlorida profile imageAUTHOR

      Jackie Jackson 

      4 years ago from Fort Lauderdale

      Thanks Merrci! It was hard to write because I wanted to cover the subject thoroughly but without being too confusing (it still looks confusing though). But it's a lot easier than it seems. Just seven simple steps and once you've done it one time, it's so quick and easy the next. It's all copy & paste though so it's really easy.

    • Merrci profile image

      Merry Citarella 

      4 years ago from Oregon's Southern Coast

      Just seeing all those lines of code makes me gulp, yet you describe it as though it is so easy. Bookmarking and pinning this. One day soon I am setting aside a couple of hours to play with code. I really want to learn how to do this. It's good to see the tutorials will continue here. You are so good at them. Thanks Britflorida!

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://hubpages.com/privacy-policy#gdpr

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)