Lists Summary

Listen to this page content by selecting the below play button.

Bulleted and numbered lists distinguish content and add clarity by organizing key points into identifiable subsections.

Overview

When using the Canvas Rich Text Editor, bulleted and numbered lists should be utilized for their intended function.

Best Practices

Bulleted Lists (Unordered Lists)

Bulleted lists do not imply ranking or chronology of importance (when compared to numbered lists).

Example of Bulleted Lists

Items to Buy:

2 Apples
5 Pears
3 Bananas

Numbered Lists (Ordered Lists)

Numbered lists demonstrate relationships by implying ranking or chronology of importance. They imply items in a series, such as procedural steps.

Example of Numbered Lists

How to Make a Cake:

Make batter
Place batter in pan
Bake for 30 minutes
Let cool for 10 minutes

Adding Lists

There are two ways to add lists in Canvas. You can either use the provided List Tools, or you can add them manually in the HTML editor.

Using List Tools

In the Canvas Rich Content Editor, you will find two icons that look like Bulleted Lists. To add a list, select the desired list type that you'd like.

Screenshot of the List icon highlighted in the Rich Text Editor.

Using the HTML Editor

To open the HTML editor, select the HTML icon </> located in the toolbar of the Canvas Rich Content Editor.

Screenshot demonstrating where the HTML editor is located within the Canvas Rich Content Editor.

Creating a List in HTML

Start by declaring the list type, either ordered list (numbered list) or unordered list (bulleted list). The ordered list is declared using the <ol> tag, while the unordered list is declared using the <ul> tag.
For each list item, enclose the item in list item tags, <li>.
For example, <li>Item One</li> would result in a list item named "Item One".
Once finished with the list items, end the list with the closing tag: </ol> for ordered lists and </ul> for unordered lists.

The following sections demonstrate how to apply HTML code for lists in Canvas.

Special Type of Lists

At times, content creators may want to create a nested list, where one list is embedded within another. Or, it might be necessary to begin a numbered list with a number other than one. The following sections demonstrate how to do so.

Nested Lists

Sample nested list

The below list requires html in order to provide the desired nested effect.

Unique Quiz Question 1: Description
1. Possible answer 1
2. Possible answer 2
3. Possible answer 3
Unique Quiz Question 2: Description
1. Possible answer 1
2. Possible answer 2
3. Possible answer 3
Unique Quiz Question 3: Description
1. Possible answer 1
2. Possible answer 2
3. Possible answer 3
Unique Quiz Question 4: Description
1. Possible answer 1
2. Possible answer 2
3. Possible answer 3

Nested List Code

<ol style="list-style-type: numeric">
<li>Unique Quiz Question: Description
<ol style="list-style-type: lower-alpha">
<li>Possible answer</li>
<li>Possible answer</li>
<li>Possible answer</li>
</ol>
</li>
<li>Unique Quiz Question: Description
<ol style="list-style-type: lower-alpha">
<li>Possible answer</li>
<li>Possible answer</li>
<li>Possible answer</li>
</ol>
</li>
<li>Unique Quiz Question: Description
<ol style="list-style-type: lower-alpha">
<li>Possible answer</li>
<li>Possible answer</li>
<li>Possible answer</li>
</ol>
</li>
<li>Unique Quiz Question: Description
<ol style="list-style-type: lower-alpha">
<li>Possible answer</li>
<li>Possible answer</li>
<li>Possible answer</li>
</ol>
</li>
</ol>

Complex Nested List

Numbered list with nested upper alpha and nested lower alpha

Introduction
1. Background Information
  1. Idea 1
  2. Idea 2
2. Thesis
  1. Idea 1
  2. Idea 2
3. Preview of Supporting Reasons
  1. Idea 1
  2. Idea 2
Chapter 1
1. Background Information
2. Thesis

Complex Nested List Code

Code for Complex List

<ol style="list-style-type: numeric;">
<li>Introduction<br /><ol style="list-style-type: upper-alpha;">
<li>Background Information<br /><ol style="list-style-type: lower-alpha;">
<li>Idea 1</li>
<li>Idea 2</li>
</ol></li>
<li>Thesis<br /><ol style="list-style-type: lower-alpha;">
<li>Idea 1</li>
<li>Idea 2</li>
</ol></li>
<li>Preview of Supporting Reasons<br /><ol style="list-style-type: lower-alpha;">
<li>Idea 1</li>
<li>Idea 2</li>
</ol></li>
</ol></li>
<li>Chapter 1<br /><ol style="list-style-type: upper-alpha;">
<li>Background Information</li>
<ol style="list-style-type: lower-alpha;">
<li>idea 1</li>
<li>idea 2</li>
</ol>
<li>Thesis</li>
<ol style="list-style-type: lower-alpha;">
<li>idea 1</li>
<li>idea 2</li>
</ol></ol></li>
</ol>

Start =""

Starting Numbered List other than 1

At times, it may be necessary to begin a numbered list with a number other than one. This is easily achieved by adding the following code to your HTML:

Code Results:

Unique Quiz Question: Description
1. Possible answer
2. Possible answer
3. Possible answer
Unique Quiz Question: Description
1. Possible answer
2. Possible answer
3. Possible answer
Unique Quiz Question: Description
1. Possible answer
2. Possible answer
3. Possible answer
Unique Quiz Question: Description
1. Possible answer
2. Possible answer
3. Possible answer

Reading Check

Use the Reading Check link below to view questions related to this workshop.

Reading Check

Sources

WCAG 2.0 Guideline 1.3.1A
University of Illinois
WebAIM