Canvas 2.0: Definition Lists

Posted by Mendy Smith on

This topic is slightly more technical, but it will allow you to enhance your Canvas content in ways that help you structure information more meaningfully.  This will require a little familiarity with HTML coding.

  • If you don’t want to learn HTML coding, that’s OK! You can still use Canvas proficiently without learning HTML! You can ignore this page.
  • If you’d like to learn HTML basics, we recommend that you start with this video. Start experimenting with the Canvas HTML editor a little at a time when you feel ready.
  • If you are already an HTML expert, please note that Canvas does not support the full realm of all possible HTML tags. You can check out the current list of supported tags and attributes here.

How to HTML in Canvas

All Canvas tools that use the Rich Content Editor (RCE) allow you to edit the HTML code.  To turn on the HTML editor, click the </> button located under the RCE window, on the right side.  When you are done with the HTML editor, click that button again (still located in the same place) to return to the RCE.  Don’t forget to save your work as normal.

Definition Lists

Definition lists (sometimes called description lists) were originally used to structure glossaries where terms <dt> needed to be paired with their corresponding definitions <dd>.  You can use a definition list anytime you need to pair two pieces of information. In one of the examples, I’ve used it to display instructor contact information.

The primary benefit of using a definition list instead of a 2-column table is accessibility.  The definition list will be far more understandable for students who use assistive technology like screen readers or text-to-speech.

Code Snippets to Try

Canvas supports both the traditional style of the definition list and the horizontal definition list. Copy and paste the code snippets below into the Canvas HTML editor to try them out.

Traditional Definition List

<dl>
   <dt>Term 1</dt>
   <dd>The definition of term 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>
   <dt>Term 2</dt>
   <dd>The definition of term 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>
   <dt>Term 3</dt>
   <dd>The definition of term 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>
</dl>

Horizontal Definition List*

<dl class=”dl-horizontal”>
   <dt>Instructor Name:</dt>
   <dd>Cicero Aristotle</dd>
   <dt>Email Address:</dt>
   <dd>caristotle@umassd.edu</dd>
   <dt>Office Phone:</dt>
   <dd>508-555-5555</dd>
   <dt>Term 1</dt>
   <dd>The definition of term 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>
   <dt>Term 2</dt>
   <dd>The definition of term 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>
</dl>

Modifications

If you would like more white space in between each pair of items, you can replace each <dd> tag with <dd style=”padding-bottom: 10px;”> Change the 10px to allow for more or less space in between definitions.

*Note

Due to screen size limitations, horizontal definition lists that display correctly in the web browser may display in the traditional definition list format in the Canvas mobile app.