D1 - Headings
Headings communicate the organization of the content on the page. Properly styled headings give screen reader users the ability to scan the page for structure and content and they help sighted readers read and scan the page too!
Watch this video to learn how Headings are used by a person using a screen reader.
Heading Basics (<-- This is a Heading)
Nest headings by their rank/level. 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.
Adding Headings with Canvas' Rich Content Editor (RCE)
- Highlight the text of your heading.
- Click the text dropdown menu.
- Select the heading level.
Once a heading has been styled using the RCE, you can make format changes (bold, italics, font size orcolor), if desired.
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 choosing a heading "because I like that size font."
- Once a heading has been styled using the RCE, you can make format changes (bold, italics, font size orcolor), if desired.