Academic Technology GuidesInstructor Guides Canvas Beyond BasicsHow do I Create a Table of Contents with HTML in Canvas?

How do I Create a Table of Contents with HTML in Canvas?

Learn how to create a Table of Contents in Canvas by using three blocks of HTML code snippets in five steps.   This method is not recommended for beginners.  Please use the Pages method if you are not a confident HTML editor.

Introduction

By creating a Table of Contents using HTML, you can help break up a long page of text and make it easier to navigate.

This tutorial will walk you through creating a Table of Contents within a Syllabus, but this same process can be used in any Page within Canvas.

For this tutorial we will be using “First Header” as the example. So you will see this in the code and in the following images. The "First Header" text is what will be replaced with your own header's names.  

1. Step One: Setup | Table of Contents HTML Code (a)

Overview

  1. Navigate to your Syllabus page and take note of each header for each section of your syllabus.
  2. Copy the code snippet below to the clipboard. 
    1. Use CRTL-A to select all - Windows keyboard shortcut
    2. Use CRTL-C to copy - Windows keyboard shortcut
  3. Enter your HTML editor and paste (CRTL-V) the code below which we will call Code (a) above the other text.
<div style="border: 3px groove #336666; margin: 15px; padding: 10px; position: relative; left: 6px; font-weight: normal; font-size: 9pt; float: right; width: 20%; background-color: #d1dfcd;"><span style="font-size: medium; font-family: arial,helvetica,sans-serif;"><strong> Table of Contents</strong><br /><br /></span><span style="font-size: 10pt;"><span style="font-family: arial,helvetica,sans-serif;"><a href="#instructor" name="Week1">Instructor Information</a></span><span style="font-family: arial,helvetica,sans-serif;"><br /><a href="#learningoutcomes">Learning Outcomes</a><br /><a id="" class="" title="" href="/courses/1303/assignments/syllabus#courseoverview" target="">Course Overview</a><br /><a href="#policies">Course Policies</a><br /><a id="" class="" title="" href="http://humboldt.instructure.com#materials" target="">Required Materials</a><br /><a id="" class="" title="" href="/courses/1303/assignments/syllabus#discussion" target="">Discussion</a><br /><a id="" class="" title="" href="/courses/1303/assignments/syllabus#website" target="">Website</a><br /><a href="#quizzes">Quizzes &amp; Exams&nbsp;&nbsp; </a><a href="#accommodations">Accommodations</a></span></span><br /><span style="font-size: 10pt;"><a href="#latework">Late Work</a></span><br /><span style="font-size: 10pt;"><a href="#evaluation">Grading</a></span><br /><span style="font-size: 10pt;"><a href="#resources">Resources</a></span></div>

The image below is what your HTML editor will look like after you paste in Code (a).

Now you will view the Table of Contents you just created.  Switch back to Rich Content Editor.  

Note: When in HTML view, you can toggle back by clicking the Rich Content Editor link.

Your Table of Contents will now be on your content page.

2. Step Two: Inputting Table of Contents Header(s)

Overview

  1.  Delete the default headers.
  2. Then type in the Table with your own headers.

3. Step Three: Locate Your Headers in the HTML Code

Overview

  1. Switch back to the HTML editor and search for your header(s) within the HTML code.

To quickly search your code, select (for MAC) command+f, (for PC) control+f to bring up the document search; type in the header you're looking for.

4. Step Four: Inputing HTML Code (b) | Creating the Tag in the Table of Contents

Overview

  1. Notice the headers you just located in the HTML code then paste Code (b)  which is listed below, in front of the header you just located.
  2. Edit the code to fit your headers.
<a href="#firstheader">First Header</a></li>

First, you will be editing the header tag in the Table of Contents as shown (#1) in the image below. 

1. Paste Code (b) in front of your header.  Then delete the name of your header, (in orange).

2. Next delete the text "First Header" within Code (b), then type in your own header in that same spot.

The image below shows where you will type in your header within the code.

3. Now create your anchor by replacing the tag "firstheader" with the name of your header but in one word.

The image below shows where you type in your header within the code.

It's important to keep the hashtag (#) and label this as a single-word-no-spaces.

5. Step Five: Inputing HTML Code (c) | Connecting the Tag to the content in the page

Overview

  1. Copy Code (c) and paste it in the code before the Header in your content.
  2. Adjust the code to match Code (b).

You have already searched for your header name, now you will work on actual header in the body of the document (#2) in the image below.

1. You will copy, paste and replace Code (c) into the content header within the HTML editor which is the yellow highlight in the image above.  

Code (c) is below.

<a id="firstheader"></a>First Header

2. The image below is what your code should look like after you paste and replace your header with Code (c).

  1. Replace "First Header" within Code (c) with your own header(s).
  2. Replace "firstheader" within Code (c) with the same one-word text you created in step 3 with Code (b).

Do not copy the hashtag, "#" in Code (c).

Double check and make sure all your heading match each other.  Hit save then repeat for you other headings.

Code (a), (b), and (c) at a Glance

Code (a)

<div style="border: 3px groove #336666; margin: 15px; padding: 10px; position: relative; left: 6px; font-weight: normal; font-size: 9pt; float: right; width: 20%; background-color: #d1dfcd;"><span style="font-size: medium; font-family: arial,helvetica,sans-serif;"><strong> Table of Contents</strong><br /><br /></span><span style="font-size: 10pt;"><span style="font-family: arial,helvetica,sans-serif;"><a href="#instructor" name="Week1">Instructor Information</a></span><span style="font-family: arial,helvetica,sans-serif;"><br /><a href="#learningoutcomes">Learning Outcomes</a><br /><a id="" class="" title="" href="/courses/1303/assignments/syllabus#courseoverview" target="">Course Overview</a><br /><a href="#policies">Course Policies</a><br /><a id="" class="" title="" href="http://humboldt.instructure.com#materials" target="">Required Materials</a><br /><a id="" class="" title="" href="/courses/1303/assignments/syllabus#discussion" target="">Discussion</a><br /><a id="" class="" title="" href="/courses/1303/assignments/syllabus#website" target="">Website</a><br /><a href="#quizzes">Quizzes &amp; Exams&nbsp;&nbsp; </a><a href="#accommodations">Accommodations</a></span></span><br /><span style="font-size: 10pt;"><a href="#latework">Late Work</a></span><br /><span style="font-size: 10pt;"><a href="#evaluation">Grading</a></span><br /><span style="font-size: 10pt;"><a href="#resources">Resources</a></span></div>

Code (b)

<a href="#firstheader">First Header</a></li>

Code (c)

<a id="firstheader"></a>First Header
Trouble Shooting

You may encounter one problem after pasting Code (a), but it is easy to fix.

Occasionally when you want to type in a new line, and you press Enter, a new box will appear. 

To fix this, instead of pressing just Enter, press Shift+Enter.