Heading Styles

 

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

Heading Basics

You can think of headings like an outline; they're nested by their rank/level (in reverse order, so 1 is the biggest and 4 is the smallest). In Canvas, the page title has the rank 1 (<h1>), and page headings descend from main rank 2 (<h2>) to sub-rank 3 (<h3>) and finally 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. 

Skipped heading levels can be confusing and should always be avoided. For example, be sure that an <h2> is not followed directly by an <h4>.

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

Formatting Headings with Canvas' Rich Content Editor (RCE)

Headings styles dropdown

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

Tips

  • Headings should indicate the start of a specific section of text; avoid "stand alone" headings (meaning there's no paragraph text directly below it).
  • Avoid using a heading style to emphasize a line of text.
  • Avoid choosing a heading "because I like that size font."
  • Once a heading has been styled using the RCE, you can make formatting changes (bold, italics, font size or color), if desired.

Headings Demo


Please be sure to view both tabs before clicking Next