border_blue and gold.png

What is a heading structure?

Page Content

What is a heading structure?
Why are we doing this?
Create headings in Canvas
Create headings in Word
List of 5
Next Steps

A heading structure is like a table of contents. It shows the hierarchy of content from most important to least important. Headings are designated as H1, H2, H3, etc., with 1 being the top level of information. The heading structure for this page looks something like this:

<H1> Headings and Page Structure
- <H2> What is a heading structure?
- <H2> Why are we doing this?
  - <H3> Provide a consistent look and feel for your Canvas pages
  - <H3> Accommodate different screen sizes
  - <H3> Increase flexibility of design
  - <H3> Document navigation for screen readers
- <H2> Create headings in Canvas
- <H2> Create headings in Microsoft Word
- <H2> List of 5
- <H2> Next Steps
  - <H3> Your Turn
  - <H3> Dig Deeper

You can see that the heading structure clearly identifies how information is organized on the page. Notice, also, how no levels are skipped. The structure does not jump from H2 to H4, for example. This helps provide consistency and reduces confusion for anyone navigating the headings using a screen reader.

Top of Page

Why are we doing this?

1. Provide a consistent look and feel for your Canvas pages

Using headings in your pages will create a consistent look and feel for your own courses as well as provide consistency across all IC courses. Heading styles are set through the blueprint, which is applied to all courses. Students find consistency to be extremely helpful when navigating course content - regardless of whether they require specialized accommodations or not.

Headings are just one design element that helps provide consistency. Other aspects include banners, icons, and topics.

2. Accommodate different screen sizes

Headings in Canvas represent an example of responsive design. Font sizes for headings are not fixed, they are a function of the size of the user's screen. Heading 2 might be 28.8pt on a large screen, for example, but smaller on the screen of a mobile device. You can try this out for yourself. If you are viewing this page on a computer, try opening it in the Canvas Mobile app (or vice versa). The headings change from the mobile app to the computer, while the enlarged font stays the same.

Here is a Heading 2 (28.8pt)

Here is a Heading 3 (18pt)

Here is big font (24px)

Here is smaller font (18px)

3. Increase flexibility of design

Using headings makes it VERY easy to make widespread, consistent changes to your content. If there is a new update to the blueprint, for example, all headings will change to be consistent with the new look and feel. By using headings, there is no need to go back and re-format each heading individually, changes will be applied automatically.

If you are in Microsoft Word and want to change the look of your document, you can change the design of all headings with the click of a button. Using headings (or styles) in Microsoft Word also allows you to create dynamic tables of contents that will update whenever headings are added, changed, or removed.

4. Document navigation for screen readers

Headings provide a navigation aid for anyone using a screen reader. Users can move from heading to heading and can easily understand the organization and structure of a document. This works in Canvas and ALSO works in any other program that uses headings, such as Microsoft Word, PowerPoint, Google Docs, etc.

Top of Page

Create headings in Canvas

In Canvas, headings are set using the dropdown menu in the Rich Content Editor or by using the Format menu (Format -> Formats -> Headings). In either case, highlight the text you wish to change and select the appropriate heading style.

Screen Shot 06-09-21 at 09.50 AM.PNG

Top of Page

Create headings in Word

Headings in Microsoft Word are called "Styles." In addition to the benefits of headings listed above, there are additional reasons to use headings in Microsoft Word:

Collapse/Expand areas of content under the heading using the small triangle next to the heading text (makes copy/paste very easy when editing documents)
Use the Navigation pane to view the entire document structure at a glance (View -> Navigation Pane)
Use the Navigation pane to promote or demote sections to different heading levels or find where blank spaces may have been formatted as headings my mistake.

To apply heading styles, highlight the text you wish to format and click on the appropriate style in the "Styles" area of the Home Ribbon. Note: You might only see one or two heading options at first. To see more, start assigning styles to your content. Word will automatically give you additional choices.

Screen Shot 05-26-21 at 01.30 PM.PNG

Top of Page

List of 5

Use heading styles instead of manually creating headings using changes to font size, weight, or color. Using the built-in styles gives your content more flexibility and makes it more accessible.
Do not skip heading levels. Skipping a heading level can lead to confusion, so don't pick headings based on aesthetic preference. Think of heading levels like a formal outline (e.g., H2 -> H3, not H2 -> H4).
Format entire lines of text as headings. Do not format part of a line, as it may cause errors (in Canvas and definitely in Microsoft Word).
Heading text should be unique. Avoid using the same text for multiple headings. An exception to this might be creating a heading for "Examples," which might come up more than once.
Headings can be used in many different applications. Canvas, Microsoft Word, InDesign, PowerPoint, Google Docs, etc. all allow the use of headings. The same benefits to using headings apply to all of them!

Top of Page

Next Steps

Your Turn

Try creating headings for your own Canvas pages. Were you able to find the two different methods for assigning headings? Did you end up with a page that has a recognizable structure? What other elements (if any) did you add to the overall look and style of the page? (icons, banners, decorative elements)
Try using the Accessibility Checker on your page to see if it catches any errors related to headings. The Accessibility Checker primarily looks for very long headings (not recommended) and for gaps in heading levels. It will NOT give an error if your page has no headings.

Dig Deeper

Add headings in Microsoft Word