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.
- You will need a prepared Syllabus page in Canvas. Follow this guide for help with adding a Syllabus.
- You will need to know how to edit pages using HTML. Follow this guide for help with HTML in the Rich Content Editor.
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)
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.
<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 & Exams </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>
3. Enter your HTML editor and paste the code below which we will call Code (a) above the other text.
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)
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
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
1. Notice the headers you just located in the HTML code then paste Code (b) [listed below], in front of the header you just located.
<a href="#firstheader">First Header</a></li>
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
- Copy Code (c) and paste it in the code before the Header in your content.
- 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 Header2. The image below is what your code should look like after you paste and replace your header with Code (c).
- Replace "First Header" within Code (c) with your own header(s).
- 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 & Exams </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 HeaderYou 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.