Lists in Canvas

Written By Sean Nufer
 
 

There are three ways to make lists on a Canvas page: unordered lists (bullet), ordered lists (numeric), and definition lists (dictionary or glossary). In this tutorial we will explore each approach.

Unordered Lists

An unordered list is a bulleted collection of items that have no particular sequence or order. In the HTML, an unordered list is defined with the <ul> tag. Here is an example of an unordered list in rich text and HTML format:

  • Bananas

  • Bread

  • Pasta sauce

  • Milk

HTML

<ul>
    <li>Bananas</li>
    <li>Bread</li>
    <li>Pasta Sauce</li>
    <li>Milk</li>
</ul>

The important components are that you want to start your list with the <ul> tag and after your final bullet point, you wrap up your list with the </ul> tag. Each list item begins with a <li> tag and ends with a </li> tag. Those are the simple rules.

You can ornament unordered lists as well. Instead of having a bullet list, you can make a list with circles, squares, roman numerals, etc. You would specify that inline within the list tag. For example: <ul style="list-style-type: circle;">. You can use these list style types:

<ul style="list-style-type: circle;">

<ul style="list-style-type: square;">

<ul style="list-style-type: upper-roman;">

<ul style="list-style-type: lower-alpha;">

Ordered Lists

When you list your items with an ordered list, your items are numbered instead of bulleted. The sequence is important as each list item is in successive order. Like the unordered list, each list item is tagged with <li>. An example of an ordered list:

  1. Watch HowToCanvas videos

  2. Visit howtocanvas.com

  3. Subscribe to HowToCanvas

  4. Follow HowToCanvas on social media

  5. Become self-actualized

HTML

<ol>
  <li>Watch HowToCanvas videos</li>
  <li>Visit howtocanvas.com</li>
  <li>Subscribe to HowToCanvas</li>
  <li>Follow HowToCanvas on social media</li>
  <li>Become self-actualized</li>
</ol>

Putting the <ol> and the <ul> together, you can created nested lists as well. The example I used in the video is such:

  • Bananas
  • Bread
    • Pita
    • Bagels
    • Torillas (2)
  • Pasta Sauce
    • Marinara
    • Vodka
    • 4 cheeses
  • Milk
    1. Make sure it's whole milk
    2. Check the expiration data
      • If it's expired, put it back
      • If it's not expired, take it
    3. Purchase milk last so it doesn't get warm
<ul>
    <li>Bananas</li>
    <li>Bread
        <ul>
            <li>Pita</li>
            <li>Bagels</li>
            <li>Torillas (2)</li>
        </ul>
    </li>
    <li>Pasta Sauce
        <ul>
            <li>Marinara</li>
            <li>Vodka</li>
            <li>4 cheeses</li>
        </ul>
    </li>
    <li>Milk
        <ol>
            <li>Make sure it's whole milk</li>
            <li>Check the expiration data
                <ul>
                    <li>If it's expired, put it back</li>
                    <li>If it's not expired, take it</li>
                </ul>
            </li>
            <li>Purchase milk last so it doesn't get warm</li>
        </ol>
    </li>
</ul>

At one point I have an unordered list within an ordered list within an unordered list, and that is perfectly acceptable. Nesting such is easier using the Canvas Rich Content Editor at first, but with practice the HTML write up will make sense and is a good approach.

<ol> Bonus!!

One thing I didn’t cover in the video tutorial is that besides using CSS you can use type attributes in ordered lists. By default your ordered lists will be numeric: 1, 2, 3, 4… You can change those to alphanumeric if you’d like. Simply put one of these types in your <ol> tag:

<ol type="1"> - Default-case numerals.
<ol type="I"> - Upper-case numerals.
<ol type="i"> - Lower-case numerals.
<ol type="A"> - Upper-case letters.
<ol type="a"> - Lower-case letters.

Here is an example of <ol type="I"> (that’s an upper case i, not a lower case L):

  1. Watch HowToCanvas videos
  2. Visit howtocanvas.com
  3. Subscribe to HowToCanvas
  4. Follow HowToCanvas on social media
  5. Become self-actualized

The second part of the <ol> Bonus!! is that if you want to start the list from a certain number then you can. Here is an example of the above list, starting at the value 5.

<ol type = "A" start="5">

  1. Watch HowToCanvas videos
  2. Visit howtocanvas.com
  3. Subscribe to HowToCanvas
  4. Follow HowToCanvas on social media
  5. Become self-actualized

Definition Lists

Definition lists are coded similarly to ordered and unordered lists, but they are used primarily for things like glossaries, encyclopedias, or dictionary entries. You can present a list of terms, as well as a list of values/definitions for those terms. The components of a definition list are:

<dl> - the beginning of the definition list

<dt> - the term

<dd> - the definition of the term

The example of the definition list in the tutorial is as such:

 
Knot

A knot is a unit of speed equaling 1 nautical mile per hour (1.15 miles per hour or 1.852 kilometers per hour).

Port

Port is the nautical term (used on boats and ships) that refers to the left side of a ship, as perceived by a person facing towards the bow (the front of the vessel).

Starboard

Starboard is the nautical term (used on boats and ships) that refers to the right side of a vessel, as perceived by a person facing towards the bow (the front of the vessel).

The code for this definition list is as such:

<dl title="Nautical terms">
    <dt>Knot</dt>
      <dd>
        <p>A <strong>knot</strong> is a unit of speed equaling 1 nautical mile per hour (1.15 miles per hour or 1.852 kilometers per hour).</p>
      </dd>
    <dt>Port</dt>
      <dd>
        <p><strong>Port</strong> is the nautical term (used on boats and ships) that refers to the left side of a ship, as perceived by a person facing towards the bow (the front of the vessel).</p>
      </dd>
    <dt>Starboard</dt>
      <dd>
        <p><strong>Starboard</strong> is the nautical term (used on boats and ships) that refers to the right side of a vessel, as perceived by a person facing towards the bow (the front of the vessel).</p>
      </dd>
</dl>

The title in the <dl> tag is optional, but it will help screen readers as they present the content. Definition lists are incredibly valuable in Canvas, yet they are vastly underutilized as we present content to our students. You can use definition lists on module or unit overview pages, on their own dedicated Canvas pages, or even interspersed among Canvas content (perhaps even in quiz instructions!).

My final thought is that the Canvas Rich Content Editor is a great way to create and modify lists, but don’t be afraid to dive into the HTML editor and create your lists from scratch. In the long run, you will feel more comfortable creating lists in HTML, and definition lists will need to be done in the HTML window.

 

Please consider subscribing to our YouTube channel for more Canvas tips and tricks. It is so easy and so free. The only thing you have to do is click this link: http://bit.ly/how2canvas

And follow us on social media

Twitter: https://twitter.com/HowToCanvas

Instagram: https://www.instagram.com/HowToCanvas

Facebook: https://www.facebook.com/HowToCanvas

Sean Nufer
Previous

Make your own reaction gifs
Next

Announcement box in Canvas