Definition Lists

A list of definitions should stand out, like the vocabulary section of textbook. This can be difficult to achieve in Canvas...until now! This exercise will show you two different ways to set up lists of definitions that are visually striking without using a clunky, inaccessible table. Here's option one, the standard:

Acid: A substance that produces H+(aq) ions in aqueous solution
Acid Anhydride: The oxide of a nonmetal that reacts with water to form an acid
Acid Anhydride: Compound produced by dehydration of a carbonic acid

And here's option two, horizontal:

Acid: A substance that produces H+(aq) ions in aqueous solution
Acid Anhydride: The oxide of a nonmetal that reacts with water to form an acid
Acid Anhydride: Compound produced by dehydration of a carbonic acid

Looks great, right? Yes. Are those definitions correct? I have no idea.

Before we get started, note that the code snippets are similar enough that while both are provided, they have the same code anatomy and list of directions!

The Code Snippet - Standard

<dl>
   <dt>Term</dt>
   <dd>Definition</dd>
   <dt>Term</dt>
   <dd>Definition</dd>
   <dt>Term</dt>
   <dd>Definition</dd>
</dl>

The Code Snippet - Horizontal

<dl class="dl-horizontal">
   <dt>Term</dt>
   <dd>Definition</dd>
   <dt>Term</dt>
   <dd>Definition</dd>
   <dt>Term</dt>
   <dd>Definition</dd>
</dl>

Anatomy of the Code Snippet - Standard

A description of the code snippet's parts.

Steps to Create a Definitions List

Highlight and copy the code snippet.
Navigate to a Canvas page and go to Edit mode.
Switch to the HTML Editor.
Paste the code snippet.
Add your own terms and definitions in the appropriate spots.
Save your work!

Modify the Code

Troubleshooting

Remember to add only one term and definition to each line!
You can edit these lists in the Rich Content Editor. After you've pasted the raw code snippet into the HTML editor, you can switch back and edit from there if that's easier for you!
If both your term and definition are showing up in the same spot, you likely typed them within the same tag. Terms should be contained in a <dt> tag (thing T for term!), and definitions should be contained in a <dd> tag (think D for definition!).
These lists don't display correctly in the mobile app. The standard list (option one) will show without bolded terms, and the horizontal list (option two) will appear no differently than the standard.