Rich Content Editor HTML Cheatsheet

snugent
Community Champion
26
81062

Update 1/1/2020. The new rich content editor is available in beta and will be available in production in the January 2020 release. See my new post about the new rich content editor for the latest updates. 

Update 6/11/19. In Quizzes.Next the rich content editor is different and does not include the right sidebar content browser. You can upload content from the toolbar. See this guide for details. Additionally, the rich content editor is now on the short term roadmap for improvements. 

Updated 8/26/17. A new option (see 14 below) was added in the August 26, 2017 release. This new option allows users to add media without switching to HTML code. I also wanted to note that the new Teacher mobile app has a simplified version of the rich content editor toolbar that is available when editing content in the app.  Big shout out to the community's mobile guru  @rseilham ‌ for pointing this out in the comments below. 

Updated 9/16/16. Please note this cheatsheet is subject to change with Canvas updates. In the August 6, 2016 release notes the rich content editor got some updates and added functionality with pages and the syllabus. You may also want to check out the following discussion about the changes.

Friendly advice: Disable "Use remote version of Rich Content Editor AND sidebar"

Below is an image of the toolbar highlighted with numbers of each command. Each numbered command has a code example with some tips on using in the HTML Editor.

Rich Content Editor Toolbar

1-Bold

Code example:

<strong>Some Text</strong>‍‍‍‍‍‍‍

Notes:

The Strong element is used bold text. It is generally not recommended to use the strong element to create page headings. Use the actual heading elements to create this type of structure. See number 20 below for details on why.

2-Italics

Code Example:

<em>Some Text</em>‍‍‍‍‍‍‍

Notes:

Italics should be used to emphasize text and should be used sparely on webpages. Depending on font it can be hard to read italicized text on monitor.

3-Underline

Code Example:

<u>Some Text</u>‍‍‍‍‍‍‍

Notes:

This element can be used to emphasize text; however, in on webpages underlined text is often confused with hyperlink text. I generally don't recommend using this element.

4-Text Color

Code Example:

<span style="color: #ff0000;">Some Text</span‍‍‍‍‍‍‍

Notes:

This command creates a span element and inline CSS (the style attribute) to create the colored text. The style attribute can be applied to any text element such as paragraphs and headers. In the toolbar there are only about 40 colors to choose from; however, in the code view you can change the color to any color you want by altering the hex color code. See Resources for Hex Colors for details on how to find hex colors. 

5-Background Color

Code Example:

<span style="background-color: #ff9900;">content</span>‍‍‍‍‍‍‍

Notes:

This command uses the span element and inline CSS (the style attribute) to create the background color. This should be used cautiously with text. If the background color and text color do not have enough contrast between them, the text can be hard to read. In the example below the text is hard to read. This can be especially hard on color blind people or people like who are losing their sight to old age. For further reading, view this Smashing Magazine article, Design Accessibly, See Differently: Color Contrast Tips And Tools.

On a side note, the Jive editor does not have background color element in the toolbar and does strip it when you try to add in code view so I had to use an image for this example.

example of bad contrast

6-Clear Formatting

Notes:

This option is handy for getting rid of the extra HTML code that sometimes comes over when you copy and paste text from other locations such as from Word or other websites. It is important to note that this option works with most elements but doesn't seem to work with the background element (see number 5 above). You can go to code view to remove the span element. If you are designer, I recommend using the text editor that has a good find and replace command to remove any extra HTML and CSS code that you don't want before moving the text to Canvas. I use Dreamweaver's find and replace for this type of task a lot and it saves me quite a bit of time.

7-Text Alignment

Code Examples:

There are three alignment options. These attributes can be applied to headings and paragraph elements. The left alignment is the default in the editor. Note: It is best to only use center and right alignment for headers or short lines of text. It is generally not recommended for longer lines of text because the text is hard to read.

<p style="text-align: left;">Paragraph of text</p> 


<p style="text-align: center;">Paragraph of text</p>




<p style="text-align: right;">Paragraph of text</p>


‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Notes:

For further reading I recommend the WebAIM articles, Writing Clearly and Simply and Text/Typographical Layout.

8- Outdent/Indent

Code Example:

What this option does depends on element it is applied to in the code. See examples below.

When applied to paragraph element the style attribute is applied to the paragraph element with padding of 30 pixels.

<p style="padding-left: 30px;">Some text</p>‍‍‍‍‍‍‍

When applied to an unordered or ordered list a new nested list is created.

<ul>


<li>Some Text</li>


     <ul>


     <li>Some indented text</li>


     </ul>


</ul>


‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍


Notes:

See 11 and 12 for more details on lists.

9-Superscript

Code Example:

H<sup>2</sup>0‍‍‍‍‍‍‍

Notes:

Be sure to only select the text that should be superscript when applying this command. You can always switch to code view to fix any issues that you might not be able to fix with the toolbar.

10-Subscript

Code Example:

2<sub>4</sub>‍‍‍‍‍‍‍

Notes:

The same applies as number 9 above.

11-Unordered List

Code Example:

<ul>


<li>List Item</li>


<li>List item</li>


<li>List Item</li>


</ul>


‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Notes:

Unordered lists are good for list of items where the sequence of the items does not matter. Lists can be nested using the indent option. I have found this to be tricky sometimes so I prefer to edit lists in code view. See example of nested list in number 8.

12-Order List

Code Example:

<ol>


<li>Do this first</li>


<li>Do this second</li>


<li>Do this third</li>


</ol>


‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Notes:

Order lists are good when you are giving students a set of an instructions for homework assignments. You can alter the list number to display letters if preferred. This must be done in code view. See example code below.

<ol type="a">


<li>Do this first</li>


<li>Do this second</li>


<li>Do this third</li>


</ol>


‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

13-Table

Code Example:

Table code involves several different elements. See code example below.

<table border="0">


<caption>Caption</caption>


<tbody>


<tr>


<td>Row 1</td>


<td>28</td>


</tr>


<tr>


<td>Row 2</td>


<td>23</td>


</tr>


</tbody>


</table>


‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Notes:

The new toolbar has a much improved table editor so you may not need to switch to code view that much now. I will note that tables should only be used for tabular data; however, the majority of people do not use them this way. This stems from some bad web design hacks from the late 90s which can still spark heated debate about their use in designing webpages. The key point to remember is that you want your pages to be accessible to all. For further reading, visit the WebAIM article, Creating Accessible Tables.

14-Insert/Edit Media

This is a new edition to the toolbar in the August 26, 2017 Canvas release. This option allows you to add a share link or embed code from a video on video sharing site like YouTube, Vimeo, or Teacher Tube without needing to switch to HTML view. If you add the share link the embed code will auto populate. You can determine the video dimensions and provide an alternative source for the video. 

15-Link

Code Example:

<a href="
http://www.google.com
">Google</a>

‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Notes:

The color of the link is controlled by the CSS (Cascading Style Sheets) that is linked to the HTML document. See Canvas Styleguide for more details. For further reading, read the WebAIM article, Links and Hypertext and Accessible CSS.

16-Picture

Code Example:

<img src="https://farm4.static.flickr.com/3433/3927529272_e6e5448807.jpg" alt="dog" width="500" height="332" />‍‍‍‍‍‍‍

Notes:

Images can be pulled from the web or Canvas files. Images do have several attributes you can add to it. When you add or edit the image in the editor the dialog box has options for adding alternative text and changing the width and height attributes. It is important to note that students must use this option to embed images in discussions. Be sure to vote for when it becomes available for voting. For further reading, read the WebAIM article, Accessible Images.

17-Symbol

Code Example:

<img class="equation_image" title="\frac{3}{4}+5" src="/equation_images/%255Cfrac%257B3%257D%257B4%257D%2B5" alt="\frac{3}{4}+5" />‍‍‍‍‍‍‍

Notes:

When this option is used in the editor the equation editor will display. You can use the editor options or write the equations in LaTex. The equation will be rendered as an image with the LaTex as alternative text.

18-Embedded Objects, Media Comment & Other LTI Tools

Code Example:

<iframe width="640" height="360"src="//www.youtube-nocookie.com/embed/WetLiIvTwZE?rel=0" frameborder="0" allowfullscreen></iframe>‍‍‍‍‍‍‍

Notes:

When using the LTI and Media Comment tools the content in most cases will be embedded objects. The main issue with some of the LTI Tools is unsecure content. Canvas is hosted on secure server and almost all browsers will now block unsecured embedded content on secure webpages. You can also paste embed code from YouTube. You can also embed documents such as GoogleDocs and Microsoft Documents.

19-Text Direction

Code Example:

<p dir="rtl">Some text</p>‍‍‍‍‍‍‍

Notes:

This attribute is essential for setting how script languages will display on the webpage. For more details, go to the WC3 article, Structural markup and right-to-left text in HTML

20-Font Sizes

Code Example:

<span style="font-size: x-large;">some text</span>‍‍‍‍‍‍‍

Notes:

Uses the span element and inline CSS (the style attribute) to create the larger text. It is generally not recommended to use this option to create header in your content. Header content should be properly marked up using the header elements. See number 21 below.

21-Paragraph and Header Elements

Code Example:

As you type content in the editor, each time you press the Return/Enter key a new paragraph is created. Paragraphs will have specified paddings and margins from the linked CSS document.  You can mark up headers using the paragraph drop down menu. Select text you want to be a header and mark as Heading 2, Heading 3, or Heading 4. The heading 1 is the title of the page and will display in the browser tab when somebody visits the page. Properly marked headings are important for people who use alternative browsers such as screen readers to access your content.

You can use the style attribute to change the font and margins if desired to have a different look that the default editor settings. I generally don't recommend doing that for all your pages because you must edit each element to make this change. That is too much work. A better option would be to get your IT people at your institution to setup KennethWare. I am working with ours to hopefully get this setup for our instance of Canvas.

Paragraph

<p>Some body text</p>‍‍‍‍‍‍‍

Heading 1

<h1>Some Header text</h1>‍‍‍‍‍‍‍

Preformatting

<pre>Some Text that will display as you type it</pre>‍‍‍‍‍‍‍

Notes:

Paragraphs and headings are considered structural elements in HTML and are essential to making your pages accessible to all. For further reading, visit the WebAIM articles, Semantic Structure and Designing for Screen Reader Compatibility. I also recommend viewing the recording of the CanvasLIVE webinar and joining the Canvas Mobile Users Group

22-Keyboard Shortcuts

The keyboard shortcut icon was added recently and provides a quick view of the keyboard shortcuts you can use with rich content editor. See the following discussion about the keyboard shortcuts and other hidden gems in Canvas.

Your ideas of Canvas' best kept secrets

23-HTML View

Use the HTML editor to switch to code view so you can edit the code. Please note there are only certain HTML elements (Tags) that are allowed in the editor and any elements added that are not allowed will be stripped out of the page when you save the page.

Additional Resources

26 Comments
kona
Community Champion

This is really useful snugent! Thanks for sharing!!

Chris_Hofer
Community Coach
Community Coach

Nice!  This is something I think I'll post for our faculty at some point on our Canvas Dashboard.  Bookmarking it now!

rseilham
Community Champion

Wow, so very helpful! Thanks for sharing!

c_t_coltman
Community Contributor

Thank you for sharing.

Stef_retired
Instructure Alumni
Instructure Alumni

Awesome, snugent​! This is unbelievably helpful. I'm going to add a link to this document to any and every blog that even mentions HTML! Smiley Happy

G_Petruzella
Community Champion

What a great resource, snugent​! Many thanks for sharing.

tom_gibbons
Community Contributor

Lovely. Following the organizational structure of the RCE is kind of genius.

My HTML module is a bit of a wreck in terms of organization, but in the interest of sharing, there may be things in it that are useful: What is HTML: Advanced Canvas Trainings

G_Petruzella
Community Champion

 @tom_gibbons  , who cares about mess when there's frogs? 😄 Thanks for sharing this.

Stef_retired
Instructure Alumni
Instructure Alumni

Thank you! This one goes straight into my bookmarks.

"The second rule of learning HTML: Steal." LOLOL.

mwiseman_admin
Community Novice

Thank you for creating this Susan...it will be on my bookmark bar.

sillsjo
Community Novice

EXCELLENT resource thank you for sharing. This will be invaluable!

Stef_retired
Instructure Alumni
Instructure Alumni

14-Link

Code Example:

  1. <a href="www.google.com">Go to Google</a> 

Notes:

The color of the link is controlled by the CSS (Cascading Style Sheets) that is linked to the HTML document. See Canvas Styleguide for more details. For further reading, read the WebAIM article, Links and Hypertext and Accessible CSS.

snugent, I just stumbled across a change in link creation behavior resulting from a recent update to TinyMCE, on which the Canvas RCE is based. For details, see this discussion question: Creating a bold-text link in the RCE?

Does anyone have any insight into this?

adam_b_nemeroff
Community Novice

So where else can I use these styles from the style guide you provided?  Are they allowed via style="..."

jchavarie
Community Participant

Can we use the HTML Editor to comment out part of a page? In html, these tags will comment out information but not delete it: <!-- preceeds text area to hide and --> ends the text area to hide. On the one page we tried, upon Save - the commented out text was deleted! Is there another way, in either the Rich Text Editor or the HTML Editor to comment out/hide text or any other data?

Jan

garciah
Community Champion

Nope, you can't use the HTML comment tag. I also tried it, and the commented out text was deleted. You might find some more useful information in this thread: Re: Aceptable HTML Elements.​ There's a suggestion to use a div tag as a workaround, but I haven't tried it yet. Good luck!

mtuten
Community Contributor

Something else related to links is that if you need to make sure that the link opens in a new window or you need to make internal page links, you'll want to use the shortcut key Ctrl/Command+K

Nugget of info about shortcut for links​, courtesy of Stephanie Sanders

rseilham
Community Champion

It's worth mentioning that with the Canvas Teacher app, a mobile RCE is now available. It's MUCH more limited than the web version, but it exists. 

248674_IMG_2938.PNG

tom_gibbons
Community Contributor

I was going to bookmark this, but apparently I already had, and completely forgotten about it. 

It's most excellent. 

ellenbcutler
Community Contributor

I SOOOO wish this was written in English. Do you people not ever consider that there are technophobes and digital ignoramuses such as myself that are forced into using this stuff? You just make it harder to learn.

kmeeusen
Community Champion

Hi ellenbcutler

Yes, I am sure this looks rather strange to those who are not HTML savvy, but the whole point of snugent‌'s posting is to provide tips for folks who want to explore some of the great options available to those who want to experiment with HTML, or are HTML  coders. This Canvas Community is for every Canvas user, regardless of their skill levels; and as such, it must include info for those who want to explore the HTML side of Canvas. Believe me when I tell you that the vast majority of content in this Community is dedicated to new and intermediate Canvas users who stick entirely to the User Interface tools, and never go near HTML. I should also add that this discussion is posted in a Community Group space intended for folks who use and have a skill set for more advanced functionality - the Instructional Designers Group.

If you are just getting started with Canvas and would like a more appropriate place to start learning I would suggest Getting Started with Canvas.  You will find great resources in there, organized around three types of users: Admins, Instructors and Students. Great stuff!

I regularly offer a workshop for my faculty (and in some venues, to Canvas users across the country) on HTML called "Do Not Fear the Code." This course teaches non-coders who might be afraid to even click on the HTML editor, how to use simple snippets of code, in simple ways that produce powerful results. You would be amazed at how excited many of them get when they find out how easy this is to do - even the technophobes, and sometimes especially the technophobes.

Canvas provided a space (Canvas instance) where I have loaded the content from my workshop to make available to members of the Community, and we now have close to 1,000 folks enrolled in there. We have around a third enrolled as teachers so that they can contribute new hacks to the space, and the rest as students so that they can learn all the thricks they wish to learn.  It is called the "CanvasHacks Demo Course".  If you shoot me a direct message with your email address, I would be happy to enroll you. It might surprise you what even a technophobe can do within just a few minutes with some of these easy hacks.

And for the record, I am not a coder. In fact, I don't even play a coder on television!

I hope this helps,

Kelley

ellenbcutler
Community Contributor

I do appreciate your response. I, like many of my colleagues where I teach, are suffering from the abrupt shift from Moodle to Canvas. I lived through Blackboard before Moodle. Granted Blackboard was the worst, utterly unusable from my point of view. Moodle was a major improvement although frustrating for many reasons. However after 5 years on that, I had pretty well wrestled most of the functions into submission. But that took DOZENS of uncompensated hours as I am an adjunct.

I have watched the Lynda videos on Canvas and struggled with the Canvas instructions. (I am amazed at the fact that legibility seems to be of minimal concern to the program designers. Teeny tiny fonts with inadequate contrast to backgrounds, absence of graphics that distinguish different elements; some of us don’t have the eyesight we once did.) I want to tear my hair out every time the word “intuitive” gets tossed around. Nothing is “intuitive” to a person like me.

It took me about three hours to sort out the “drop down question” issue. I can honestly say that the directions for the work-around for matching using images could have been more complete. But I seem to be in a minority of 1 there, and I accept that.

Glad to hear about your courses. But the reality is I simply don’t have time. As an adjunct, every second I spent on this stuff is uncompensated and I am already paying enough out of pocket for the privilege of being employed part time. Honestly, did I have the time, I’d like to look into it. Could I get even a small stipend from the college to support continuing education and mastery of a program that has such an impact on my teaching and my students learning, I’d look into it.

And I am going to mentioned to our own tech person that such resources exist and should be pointed out to us, perhaps with an emailed list of links. I have a hard time finding help—and so often discover that had I simply been directed to look in a particular direction, I might have gotten the help I needed in a timely way.

Thanks again.

Ellen

kmeeusen
Community Champion

Hi Again ellenbcutler

I completely understand having been an adjunct online instructor since 1999. In fact, I am currently an adjunct for two different schools while also being the Canvas Admin at a third school. I have literally put in thousands of unpaid hours over the years in both classroom prep and learning how to use the tools better. Those hours have made me a better teacher and directly led to my current position as an Admin.

As an LMS Admin, I recognize that my faculty come to me with varying levels of technological skill, and we try to make sure we are training them at an appropriate level. I also recognize that changing LMSs is always a very hard job for our faculty, and I have been through four of those changes in my career. In fact, I told my current boss that if we have to migrate again, I'm retiring, because it is just as hard for us Admins!  I also recognize that too many schools are not particularly fair to their adjuncts - way too many!

Look at it as a grand new adventure, and you will do just fine. And any time you need help, the folks in this Community will be very happy to help - it is what we do.

Kelley

manish_tripathi
Community Participant

Thank you, Susan. 

Much appreciated!

lisa_moore
Community Novice

Thank you for this! I am having some success using html to create buttons. I'm trying to figure out how to have the buttons in a horizontal row.  I know tables shouldn't be used for design purposes, so how do I do this? Thank you very much for your help. 

snugent
Community Champion

 @lisa_moore ‌ You can use a table. Just keep the table super simple. If the content makes sense when read from left to right in the table, it will be accessible to screen readers. 

GideonWilliams
Community Champion

This is super snugent

I think it is quite important to note that developments for the RCE in New Quizzes/Quizzes.next does not appear to be in the short term road map.

Apparently this RCE is a very different beast which spells disappointing news for those hoping to see it appear for some of the New Quiz features.

Would love to be proven wrong of course!