Adding a Table of Contents with anchor tags to a Syllabus in Canvas

This tutorial will demonstrate how to create a table of contents at the beginning of your syllabus that links to separate sections of your syllabus inside the Syllabus Tool in Canvas. This tutorial also contained a video which demonstrates the steps in the Canvas course site.



For best visibility, watch the video in full screen.



Step #1 - Compose your syllabus in Word

  1. Compose your syllabus in Word.
  2. For each section of your syllabus remember to highlight the text and change the heading to the “Heading 2” format.
  3. At the top of your Syllabus Page, create a textual "table of contents" that list out the sections of your Syllabus.
  4. Copy your entire Syllabus. We will paste your syllabus into the Syllabus tool in Canvas in the next step.


Step #2 - Paste your syllabus into the Syllabus tool

  1. In your Canvas course site, go to the Syllabus Page.
  2. In the Rich Content Editor, click [Edit].
  3. Paste your syllabus into the Rich Content Editor.


Step #3 - Edit the HTML code to create links in the table of contents (ToC)

  1. In the upper right corner of the Rich Content Editor, click on the [HTML Editor] button to switch views.
  2. In your table of contents sections, add links to each of the items in the list.

For example: 

Locate the table of content item called Course Description. Add the following "code" (shown in red below) directly in front and in back of the words Course Description.

<a href="#description">Course Description</a>

This creates the link in the table of contents. The word after the # sign is a shortened description of the ToC item. This word can be anything you'd like as long as it's a single word or number.


Step #4 - Edit the HTML code to create anchors on the section headings in the syllabus text 

After adding the link code, scroll through the rest of the syllabus HTML code and locate the heading for the section where you'd like the link above to anchor (go to).

For example: 

Locate the heading called Course Description. Add the following "code" (shown in red below) directly in front of the words Course Description.

<a id="description"></a>Course Description

This creates the anchor (landing point) in the syllabus text. Note that the word "description" in the anchor, matches the word "description" in the link (above). Again, this word can be anything you'd like (e.g. a shortened description) as long as the word in the anchor MATCHES the word directly behind the # sign in the link code (see the example in Step #3 in above).


Step #5 - Complete the coding for the table of contents links and the heading anchors

  1. Add the link code to each item in the table of contents, choosing a unique identifier for each item.
  2. Add the anchor code to the corresponding section headings within the syllabus, matching the anchor identifier with the link identifier.

For example: 

Locate the table of content item called Required Textbook. Add the following "code" (shown in red below) directly in front and in back of the words Required Textbook.

<a href="#textbook">Required Textbook</a>

Locate the heading called Required Textbook. Add the following "code" (shown in red below) directly in front of the words Required Textbook.

<a id="textbook"></a>Required Textbook




Keywords:Table of Contents anchor tags Syllabus Canvas   Doc ID:104345
Owner:Amy M.Group:UW-Milwaukee Center for Excellence in Teaching and Learning
Created:2020-07-24 15:35 CDTUpdated:2020-07-24 16:35 CDT
Sites:UW-Milwaukee Center for Excellence in Teaching and Learning
Feedback:  0   0