D1 - Heading Styles

Headings communicate the organization of the content on the page. Properly styled headings give screen reader and other assistive technology users the ability to scan the page for structure and content (just as sighted readers tend to do).

Heading Basics

Nest headings by their rank/level, in reverse order. In Canvas, the page title has the rank 1 (<h1>), and page headings descend from main rank 2 (<h2>) to sub-rank 4 (<h4>). Headings with an equal or higher rank start a new section, headings with a lower rank start new sub-sections within the higher ranked section. (Think of how an outline is structured.)

Skipping heading ranks can be confusing and should be avoided where possible. For example, be sure that an <h2> is not followed directly by an <h4>.

Here's a visual example of heading styles in action.

New RCE heading dropdown

Formatting Headings with Canvas' Rich Content Editor (RCE)

  1. Highlight the text of your heading.
  2. Click the text dropdown menu.
  3. Select the heading level.

Once a heading has been styled using the RCE, you can make format changes (bold, italics, font size or color), if desired.