Create a table of contents (index) for your web or blog posts

Hi! When I was starting (like 5 years ago or probably more) in all this blogging thing, I created some long long content for my readers to enjoy, most of the time I found the usage of a table of contents (index, like in books or magazines) really necessary. What a table of content usually provide us in books, magazines or big editorial projects is an instruction to locate the content or group of contents we are looking for inside that project. Hierarchy is extremely important,  you want to make your readers understand what the most important topics in the inside are, and then a list of sub-headings that are related to its parent heading, for example: Contracts have clauses, for example 1.3.4; there are chapters and sub-chapters, topics and subtopics. However, sometimes there’s no need for us to use a complex hierarchy, it’s just needed to put the main headings and a location indicator for the readers to go and read what they want to read, you can do it with small images and a title, each one as a list item. If you wish to learn how to implement this into a blog post or web page made by yourself, follow these incredibly simple instructions (click here to go directly to the example):

1- Locate all your headings, the ones you want to link to in your table of contents.

You can do it by looking through your post’s HTML or your project’s source code, they come in the form of heading tags, they are as follows:

<h1>Heading Number 1</h1>
<h2>Heading Number 2</h2>
<h3>Heading Number 3</h3>
<h4>Heading Number 4</h4>
<h5>Heading Number 5</h5>
<h6>Heading Number 6</h6>

Everything inside the HTML tags is your title’s name, what you wrote as a heading in Markdown or a WYSIWYG (what you see is what you got) editor, meaning, what you formatted in your CMS’ (WordPress, Drupal, etc) editor. What you want to do is add a new attribute to each of the heading tags you wanna link, an attribute called “ID“, which given a custom value can be later linked inside your table of contents as a refer inside an anchor tag (a link).

2- Give them an ID inside the HTML

Once you’ve located the headings (and subheadings if you want), give them the “IDattribute by editing the H1, H2 or whatever Heading Tag you want. For the example at the very bottom of this article, I had to edit two heading 2 tags and 10 heading 3 tags (the list of movies and the list of series). They will end up looking like the code down below.

<h2 id="series">Series that made history</h2>
<h3 id="brothers">Band of brothers</h3>
<h3 id="xfiles">The X-Files</h3>
<h3 id="friends">Friends</h3>
<h3 id="simpsons">The Simpsons</h3>
<h3 id="sopranos">The Sopranos</h3>

<h2 id="movies">Awesome movies I love</h2>
<h3 id="metal">Full Metal Jacket</h3>
<h3 id="godfather">The Godfather Part 1</h3>
<h3 id="rear">Rear Window</h3>
<h3 id="terminator">Terminator Saga</h3>
<h3 id="fellas">Goodfellas</h3>

3- Now create a list and target your headings

What list? The table of contents will be just a list of elements, no matter how you style it, this will only be a list of links that, sorry for repeating myself, links to each of the heading you wanted to be linked at. What I did was, I put a heading 1 title with the “Table of contents (Example)” text and down below, a series of DIVs that contain ordered lists, each item containing the links to the headings I chose. How to do it? Well, create a list however you want to do it but the important part comes when you want to link to the headings.

I even made the heading 2 items that represent the main headings act like links putting them an anchor tag, because what if the reader wants to start at the beginning of the explanation for the movies instead of a specific movie? Simple, give the headings a link too! To do this, when you are creating or giving some text a link behaviour, your CMS will ask you for the reference or destination, you could provide a web site, but we NEED to link to the IDs we just added to our headings!

Instead, we’ll give the destination a hatch symbol followed by the correspondent ID name, for example: #movies, #metal and more. Try to use – to separate words in tags and not underscores, underscores look bad for IDs and classes. Now let’s take a look at what my links ended up looking like in the html. If you have to edit HTML because you aren’t working with a visual content editor, inside the unordered list tag there will be list icons (<ul> and <li>) with the text you specified for each heading, now wrap each text inside the list items (if you chose a list as a stylistic purpose, you can choose span tags or table cells) with an anchor tag: <a href=”#theNameOfMyHeading”>Super Cute Title</a>. Ignore the previous dot, in the markup there’s no putting dots outside the tags. Note that I changed my decision and used an unordered list instead of an ordered list like I’d said before… but hey! Ordered lists are what’s best for these jobs because they display numbers, you could, of course, get rid of the bullets of the list items and put a more complex number (like 2.5) at the beginning of each list item (which of course are contained within an anchor tag). Now take a look at my code (it’s not the complete code, I avoided the DIVs and the inline CSS):

<h1>Table of contents (Example)</h1>
 <h2><a href="#series">Series that made history</a></h2>
 <ul>
 <li><a href="#brothers">Band of brothers</a></li>
 <li><a href="#xfiles">The X-Files</a></li>
 <li><a href="#friends">Friends</a></li>
 <li><a href="#simpsons">The Simpsons</a></li>
 <li><a href="#sopranos">The Sopranos</a></li>
 </ul>
 <h2><a href="#movies">Awesome movies</a></h2>
 <ul>
 <li><a href="#metal">Full metal jacket</a></li>
 <li><a href="#godfather">The Godfather Part I</a></li>
 <li><a href="#rear">Rear Window</a></li>
 <li><a href="#terminator">Terminator</a></li>
 <li><a href="#fellas">Goodfellas</a></li>
 </ul>

This will come to a conclusion where you’ll have something like the thing you see blow this paragraph. I added some dummy text to help expand the example and give it a real “table of contents” feeling. What will happen when you click the link is that your browser will scroll down directly to the heading that the clicked link is supposed to go to (the heading tag with the ID) and then you can start reading what you wanted to read. Table of contents are not just for that, you can give your reader a sneak peek into what your article contains, many magazines do this to attract customers when they pick up the magazines from the shelf inside a store. But be careful, a poorly made table of contents can help you lose the reader’s interest in your article, no matter how good it is! Take a look at my example:

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to.

Table of contents (Example)

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself.

Series that made history

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself.

Band of brothers

4-25-band-of-brothers-1800

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then she.

The X-Files

x-files

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then she.

Friends

friends-season

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then she.

The Simpsons

simpsons_961x421

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then she.

The Sopranos

the-sopranos-2_7524

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then she.

Awesome movies I love

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself.

Full Metal Jacket

full-metal-jacket-21545-hd-wallpapers

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then she.

The Godfather Part I

the-godfather-1

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then she.

Rear Window

RearWindow1

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then she.

Terminator Saga

6a00d8341bfb1653ef0192abb86cf2970d

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then she.

Goodfellas

goodfellas

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then she.

Advertisements

2 thoughts on “Create a table of contents (index) for your web or blog posts

Ask, comment, or give feedback :)

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s