Create HTML Headings in Canvas

This guide explains switching to HTML view in the Canvas Rich Content Editor (RCE) to change the appearance of text headings.

HTML Considerations

Not all HTML is accepted by Canvas.
All customizations must meet WCAG Level A and Level AA compliance.
HTML code must be written perfectly for it to work.
Enter replacement text exactly where placeholders appear in the copied code.
Avoid extra spacing or duplicating punctuation that is not represented in the code provided.
Backspace and delete can mess up your HTML in the RCE.
You can copy HTML anywhere in your course for a consistent appearance.
Always confirm the results of your work before publishing.

Step 1: Copy the Code

Copy the line of code for the heading level you want:

<div style="background-color: #000000; padding: 5px;"> 
  <h2 style="text-align: left;"><strong><span style="color: #ffffff; font-size: 24pt;">YOUR H2 HEADING TEXT GOES HERE</span></strong></h2> 
</div>

<div style="background-color: #000000; padding: 5px;"> 
  <h3 style="text-align: left;"><strong><span style="color: #ffffff; font-size: 18pt;">YOUR H3 SUBHEADING TEXT GOES HERE</span></strong></h3> 
</div>

<div style="background-color: #000000; padding: 5px;"> 
  <h4 style="text-align: left;"><strong><span style="color: #ffffff; font-size: 16pt;">YOUR H4 SUBHEADING TEXT GOES HERE</span></strong></h4> 
</div>

Step 2: Open the HTML Editor and Paste the Code

Open the RCE in Canvas and click the HTML toggle button, represented with a less than-slash-greater than symbol, then paste the heading code.

Step 3: Customize the Appearance

Replace the YOUR HEADING TEXT GOES HERE placeholder with your own heading text. Remember, headings break up your page into easier to comprehend chunks and give hierarchy order. A good heading gives clear context for the information that follows. For the code provided, the background color is black, and the font is white. Black and white are a classic choice for the highest contrast and best visibility, but you can find different hex values for other colors. If you do not want a black background, replace #000000. If you don't want white font, replace #ffffff.

Need help selecting accessible colors?

Select color combinations that pass the WebAIM color contrast checker or select an accessible color palette to ensure your content is clearly visible to students. Too light of font on the background is impossible for many people to see clearly and color blindness causes colors to appear grey. Yellow and white, red and green, green and brown, green and blue, blue and gray, blue and purple, green and gray, green and black, red and pink, and any variation of monochromatic color schemes can be difficult to see clearly.

Darker background is best with lighter text color.

Step 4: Leave HTML View and Check for Errors

When you click the HTML toggle button, Canvas will switch back to the WYSIWYG editing view. Make sure there are no errors in the Accessibility Checker. If there are errors, clicking the icon provides a reason for the error and helps you fix it. For example, if you enter <H1>, which isn't allowed, you'll be prompted to change it.

Step 5: Save Your Work

Once you address errors and your content looks as it should, be sure to save your work.