ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

Create a Table of Contents for Your Hub - Quick and Easy

Updated on June 19, 2013

A Table of Contents: Why and Where?

A Table of Contents (TOC) is a great addition to longer hubs that have lots of capsules, like this one. It makes it easier for your readers - and you - to follow the thread of your ideas, and to find things they want to go back to.

I want to thank DarkSide, the Hubber who first posted an article on how to make a Table of Contents for a hub four years ago. I learned how to do it by reading his instructions, and his method still works. In fact, all I've done is streamline his method in 3 or 4 ways to make it easier for non-geeks who are freaked out by HTML, and easier and faster for everyone.

Thanks, Darkside.

I only use a Table of Contents in hubs that have five or more capsules, and not always, even then. Just think about whether it would be helpful. Are people going to want to find their way to particular quotes, ideas, or suggestions in this hub? Are you offering detailed, step-by-step instructions? Are you casting a wide net about a whole lot of topics? These are good reasons to add a Table of Contents to your Hub.

Usually, I like to put my TOC as the second capsule on the left, with a photo next to it, as you see here. Or, it can go on the right. Anyway, below the introduction, but near the top makes the most sense to me.

Line up your thoughts

A table of contents can bring a little order and clarity to your organic hubs.
A table of contents can bring a little order and clarity to your organic hubs. | Source

Cautions - Let's Get the Weird Stuff Out of the Way

Okay, to do this, you will need to play around a bit with HTML, the underlying code that adds links, formatting, and other cool stuff to the plain words and letters on a web page. But don't panic! Even if you've never looked inside a link, you're going to be working with the very simplest bit of HTML code - how to write a link. And I'll hold your hand with pictures and examples all the way through.

There are also a few other geeky tips to make this work, so take a deep breath before each bullet point, because, once you get to the end of this capsule, it's all easy as pie from there. (And I mean eating pie, not even baking it!)

  • Locate the > (greater than) symbol (SHIFT+Period) and the # (number sign) symbol (SHIFT+3) on your keyboard. You're going to need them.
  • You want to publish your hub, and then go back and add the table of contents, then publish it again. We have to do this because links can only be tested on published hubs, and we want to test our links before we finish our Table of Contents.
  • You are going to want 2 browsers open to do this. One will be the one where you go into edit mode on your hub and build a table of contents. The second will hold a published view of your hub. In addition, you may want to either print out this hub, as instructions, or have it open in a third browser window.
  • Open Notepad, or any plain-text editor. It's going to hold just one line, the text of the link to your hub page.
  • Last, but not least, you're going to do all of this backwards. It's the geeky gimmick that makes this whole thing work. There's a bunch of stuff in this process that all works backwards, and, by tricking it out and working backwards yourself, you're going to fly right through and get your table of contents done in just about 10 minutes. (Well, maybe not the first time!) Here's what I mean:

- You're going to create the last TOC entry first, and work your way up from the bottom
- You're going to create the end of each link first, then paste in the beginning
- You're going to test the link first, then finish writing it.

Still breathing? Good! Because this was the only hard part. It's all easy from here.

Screenshot 1: Ready to Edit your TOC

Your hub, in edit mode, on the left. Your hub, in view mode, on the right. Notepad open on the lower left
Your hub, in edit mode, on the left. Your hub, in view mode, on the right. Notepad open on the lower left | Source

Set up Your Browsers and Notepad

So, let's get you set up to create your Table of Contents. You can see the results of these steps in Screen Shot 1.

  1. Open two separate browsers, not two tabs of the same browser. I'm using Firefox, but you can use Internet Explorer, or any other browser.
  2. One browser will be for editing the hub. I put that one on the left. Go to HubPages, and, under your name, choose My Account. Then select the hub in which you want to add a TOC. Click on Edit to go into Edit mode for that hub.
  3. The second browser will be for viewing the same hub. I put that one on the right. Go to HubPages, and, under your name, choose My Account. Select the hub that you are working on, but do not click on edit or go into edit mode. Simply view the hub.
  4. Note the two different address bars in the two browsers. The one in edit mode t says something like "http://hubpages.com/hubtool/edit/3171797". The one in view mode says something like, "http://sidkemp.hubpages.com/hub/TOC", which is your domain name and the name of your hub. This is crucial.
  5. Open Notepad and resize the window so that it is very small and out of the way.

Screenshot 2: The Add button

Screenshot 3: Select Capsule Type

This close-up shows you where to select the underlined link type for your capsule.
This close-up shows you where to select the underlined link type for your capsule. | Source

Screenshot 4: Add More Capsules

The Add More Capsules control box, with the Link option on the right, second down from the top.
The Add More Capsules control box, with the Link option on the right, second down from the top. | Source

Create the Table of Contents Capsule

Your Table of Contents will be in a special capsule called a link capsule. To create it, click on the floating "Add" button on the left that you see in Edit mode, as shown in Screenshot #2. When a blue bar appears listing the different types of capsules, choose link as the type of capsule. This is shown in the close-up in ScreenShot #3.

There is another way to create the TOC capsule. You can go to the menu on the upper right, called Add More Capsules, and click on the links box. which is the second from the top on the right. This is shown in Screenshot #4.

Then click edit, and name the capsule Table of Contents or whatever else you want to call it. The result of these steps is a link capsule called Table of Contents, as shown in Screenshot #5.

Now it's time to start building the links and putting them into your TOC capsule!

Screenshot 5: The TOC link capsule called "Table of Contents"

The TOC link capsule, ready to edit, where you will add the links to all your other capsules
The TOC link capsule, ready to edit, where you will add the links to all your other capsules | Source

Copy the URL of the Hub

Okay, we're almost ready to start building the TOC. There's just one more step, and its simple. The web page address in the address bar is called a URL (Universal Resource Locator). The URL is the key to making a link, because it tells computers where to do when they click on the link.

You want to copy the URL of your Hub from the View browser to Notepad:

  1. Click on the browser on the right, with the view of your hub, and highlight the text in the Address window, the URL, which will look something like this: "http://yourname.hubpages.com/name-of-your-hub.
  2. Copy the highlighted URL (CTRL+C).
  3. Click on notepad, and click inside the blank document.
  4. Paste the URL into notepad (CTRL+V).
  5. Type a pound sign (#) (SHIFT+3) in Notepad right after the end of the URL.
  6. Compare the URL in Notepad to the URL in the view browser. Make sure they are exactly the same, except for the extra pound sign. Make sure there are no extra spaces in the text in Notepad.
  7. If you want, you can save the notepad file.

Now, you are all ready to start building your Table of Contents.

Make the Last Entry First

To make things easier, we're going to make the last entry first. Here are the steps, which are explained in detail below:

  1. View the source code, the HTML version of your hub.
  2. Find the location of the last capsule title.
  3. Copy the ID that marks the location of the last capsule.
  4. Build the link.
  5. Test the link.
  6. Add the Link Title.
  7. Add the Link Summary.

"Seven steps for each link," your screaming, "This is going to take forever!" Not so, my friend. I timed it. You can do this in two minutes per link - literally. I just followed these steps, and created a Table of Contents for a hub with 10 capsules in 20 minutes. In fact, the longest part is deciding what to say in your summary!

Following these seven steps, you will build one link, the link for the last capsule. Then you'll work your way up from the bottom, adding the rest of the links.

Step 1: View the source code of your hub

When you look at a web page in a browser, you see the display view, which is actually created by the browser on your computer. The host out on the internet sends instructions to your browser called HTML code, and the browser turns it into the page display you see. We're going to go under the hood and see the HTML code. Don't worry. The way we're doing it, you won't be able change anything, not even by mistake, so you can't possibly mess up your hub.

Go to the browser which is showing you the display view of your web page. That's the one on the right, if you set up the screen the way I did. Viewing the source code is easy. How to do it depends on the browser you use:

  • In Firefox, right click anywhere on the web page, and select "view page source."
  • In Internet Explorer (IE) 9, look for the tools icon on the top right. Click on it, and select F12 Developer Tools (or just hit the F12 key on your keyboard).
  • In Google Chrome, use the tools icon on the top right, then select Tools, then select Developer Tools (or hit CTRL+SHIFT+I on the keyboard).

If you're looking at the source code, it will look something like Screenshot 6.

Step 2: Find the location of the last capsule title

If you look closely at Screenshot #6, you'll see, in the bottom left, the Find: box. That's there because I hit CTRL+F to open this Find Dialog box. CTRL+F gives you a Find Dialog box in any browser. Anything I type in there, the computer will find what I'm looking for in the source code. And that's exactly what we want to do.

  1. Put the cursor in the Find Dialog Box.
  2. Type the greater-than symbol (>) by hitting SHIFT+Period.
  3. Type the title of the last capsule in your hub.

If you did that right, you'll see the HTML code for the header of the last capsule of your hub. If you didn't, just try again. You'll get it! When you do, it will look like Screenshot #7.

Step 3: Copy the ID that marks the location of the last capsule

When you find the header of the last capsule of your hub, take a look to the right. You're looking for something that looks like id="txtd_19064139". Of course, you're ID code will be different. That's the whole point. Congratulations! You've just found the unique ID for this capsule. This unique ID will be the target of your link. That means, when anyone clicks on the link in the Table of Contents, the browser will jump down to the capsule that shows exactly this location in your hub. Note that the ID may begin "txtd_", but I've also seen capsules with ID's that begin "mod_". Either way, it doesn't matter. Whatever the ID is, that's what you want to find and copy.

Now, highlight what's inside the quotation marks with your mouse. Make sure you get the whole ID, but not the quotation marks. And copy that text by hitting CTRL+C.

You're ready to build the link.

Step 4: Build the link

Now, return to the browser where you are editing your hub, and go to the Links capsule that says "Table of Contents." You will see an edit button on the blue bar above the words "Table of Contents. Click on the Edit button, and you will go into Edit mode for the Link Capsule, which looks like Screenshot #8. Make sure the round radio button Add links by: URL is checked.

Put the cursor in the URL: dialog box. Paste in the ID you copied from the source view of your hub with CTRL+V. When you do, your link box should look like the one you see in Screenshot #8, except that the ID for your hub capsule will be in place.

Now you're ready for the last step in building your link. Return to your Notepad window. (If you've forgotten what that is, check out Screenshot #1, and look at the lower left.) Highlight all the text of the link from the beginning "http://" to the end "#" and copy it with CTRL+C.

Return to the link edit box for your table of contents. Put the cursor at the beginning of the URL dialog box, before the ID. Paste in the web page URL of your hub with CTRL+V. The result should be a URL that looks something like this: "your.name.hubpages.com#txtd_123456789", as shown in Screenshot #9.

This is what I mean by building the link backwards. We find the unique end of the link first, and paste it in. Then we put the cursor in front of it, and add the piece that's the same for every link, the URL of your hub. Easy-peasy!

Click on the "add Link" button.

Step 5: Test the Link

As soon as you've clicked on the "Add Link" button, you will see the dialog box where you test the Link URL; add the Link Title; then add the Link Description.

The first thing you do is hit the Test button and test the Link URL. If it comes up okay, then you're good to go. If it doesn't, check these items:

  • Be sure you've published your hub. A test of a Link URL will fail, even if it is right, if the hub is not published.
  • If the hub is published, just read the link really carefully. Make sure there are no spaces or extra characters. Make sure that all the ??forward slashes (/) are correctly in place. Make sure the pound sign (#) is in place between the page name and the ID code.
  • Double check that the ID code is right.
  • Test again. It should work this time.

Once the message "Link is Okay" appears, you're ready to add the Link Title and the Link Description.

Step 6: Add the Link Title

This is the easiest part. Simply type the title of your capsule into the Link Title Dialog Box.

Step 7: Add the Link Description

This is easy, too. Type any short phrase or sentence that describes the capsule. Feel free to make it fun or enticing! You don't have to to this, but a TOC with no descriptions makes me yawn!

Your TOC entry is ready!

Congratulations! You've made the last entry in your Table of Contents. Now, you're ready to work upwards, putting in the rest.

Make All the Other Entries Just Like the Last One

Now, working your way up from the bottom, make each entry in your table of contents just like you made the last one.

Why work from the bottom up? Simple: The HubPages editor inserts each link above the last link you made. So we start at the bottom, then create the second-to-last link, then work your way up. Then, when we finish, the whole TOC capsule has all the TOC entries in the right order.

If you don't do that, no worries! You can re-order the links by dragging them up or down, as needed.

And, of course, you don't need to include all your capsules in your Table of Contents. I usually don't include the first one, which is an introduction. And I don't include photo capsules. It's up to you!

Screenshot 6: View the Source Code of Your Hub

This is what your hub looks like as HTML in the View Source mode. Be sure to note the Find Dialog box in the lower right.
This is what your hub looks like as HTML in the View Source mode. Be sure to note the Find Dialog box in the lower right. | Source

Screenshot 7: Find the Header of Each Capsule

This is what your header looks like in HTML. Note the   symbol just before your title: You use that in your search. Note the blue ID tag with a bunch of numbers. That's what you copy.
This is what your header looks like in HTML. Note the symbol just before your title: You use that in your search. Note the blue ID tag with a bunch of numbers. That's what you copy. | Source

Screeenshot 8: The ID Code in the URL Field

Here, you see the URL field from the Link Capsule with the ID tag inserted. This link is not finished.
Here, you see the URL field from the Link Capsule with the ID tag inserted. This link is not finished. | Source

Screenshot 9: Add Link with URL Field Complete

Here, you see the URL field complete, with a correct link. You are ready to hit the Add Link button.
Here, you see the URL field complete, with a correct link. You are ready to hit the Add Link button. | Source

Screenshot 10: Add Link - Done!

Here, the link is tested, and the Link Title and Link Description look just right. It's time to click Done!
Here, the link is tested, and the Link Title and Link Description look just right. It's time to click Done! | Source

Voilà! a Table of Contents

You've done it! If you come this far, and worked along with me, you've created your first table of contents.

You can see the results by scrolling up to the top of this article, and seeing the Table of Contents I created for this hub. It's just to the left of the coconuts!

And if you haven't done it yet, that's okay. Take a deep breath. Go wash some dishes or walk the dog, or whatever relaxes you. Then come back and give it a try.

You can add a table of contents to a hub any time. In fact, it's a great thing to do when you're freshening up an old hub, and you want to get more page views.

And here's a freebie! How did I get that cute French à ("a," with accent grâve) in the capsule title? In the capsule, in Edit mode, look at the toolbar. You'll see the bulleted list, the undo, and a weird thing that looks like a horseshoe (Ω) but is actually the Greek letter Omega. That is the button to insert a special symbol. Click there, and a page of special symbols comes up. They're all too small to read, but that's okay, because, if you hover over one with the mouse, you'll see it nice and large on the upper left. Click on any special character, and it gets inserted into your capsule. And, because this hub is all about how to deal with weird glitches, the character gets inserted into the body of the capsule. If you want it in the Capsule Subtitle, you'll need to cut it (CTRL+X on a PC) and move the cursor to the Capsule Subtitle and paste it (CTRL+V) into place.

If you're still with me, you're a pro!

I look forward to seeing your next hub - with a table of contents - soon!

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://corp.maven.io/privacy-policy

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)
ClickscoThis is a data management platform studying reader behavior (Privacy Policy)