Overview
HTML headings help organize course content into clear, logical sections, making it easier for learners to navigate and understand. They establish a structured flow, guiding users through topics and helping ensure information is easy to find.
In some cases, such as inside accordion items, you may choose to visually style a heading to appear smaller (for example, making an <h2> look like an <h4>). This is acceptable, but the heading hierarchy must always be maintained. Use the correct semantic level (e.g., <h2>, <h3>, etc.) to preserve the document’s structure for accessibility and screen readers, even if you’re adjusting the appearance for design consistency.
Common Pitfalls to Avoid
- Skipping heading levels (e.g., H2 → H4)
- Using heading levels for visual styling instead of structure
- Exceeding H4 headings
- Overusing headings instead of reorganizing content
[Example]
H2 Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris leo leo, tincidunt in interdum sed, vulputate id neque. Fusce nec congue dolor. Phasellus porta, enim sed volutpat efficitur, nunc sem pharetra ligula, ac accumsan lacus ipsum in ante.
H3 Heading
Mauris tincidunt ipsum id lorem auctor consequat. Aenean id posuere turpis. Duis eget iaculis ligula, ut blandit lectus. Etiam mollis risus non aliquam dignissim. Suspendisse fermentum nulla at lorem efficitur, in iaculis diam lobortis.
Praesent laoreet ultrices lectus, eu ultrices elit suscipit ut. Mauris pretium risus sed lorem efficitur imperdiet. Nullam tempus dolor urna, ac ornare massa finibus tristique.
H4 Heading
Fusce vitae suscipit dui, eu venenatis enim. Vestibulum tristique, lectus vel consequat molestie, purus erat egestas quam, eu viverra sapien lectus a risus.
Nullam viverra, elit nec posuere fermentum, ligula ex facilisis dolor, non bibendum lectus nulla eu velit. Pellentesque laoreet sed velit cursus faucibus. Donec lobortis leo erat, ut feugiat mi consequat mollis.
Guidelines
Do
ID
Limit H2 tags to Three Per Page
From a UX standpoint, this helps keep content organized and easier to scan, preventing users from feeling overwhelmed by too many sections at once. If you need more than three H2s, consider breaking the content into separate pages to improve focus and navigation. While this isn’t always possible, aim to follow this guideline whenever you can for a clearer, more user-friendly experience. If more are needed, consider breaking the content into additional pages.
ID
Production
Ensure Headers Follow Proper Hierarchy
Ensure headers on Canvas pages follow a proper hierarchy (H1, then H2, then H3, etc.). This structure is crucial for accessibility because it helps screen readers interpret and navigate content effectively, improving usability for all learners. Please note: In Canvas, Rise, and many other authoring tools, the <h1> heading is already accounted for – typically reserved for the page or lesson title. In these cases, your content should begin with an <h2> to maintain the correct semantic structure.
Production
Use the Underline Style for H2 Tags
Adding an underline helps visually communicate the hierarchy of content on the page. This helps learners quickly scan and understand how different pieces of information relate to one another.
Do Not
ID
Production
Using heading levels beyond H4 can indicate poor content organization and create confusion for learners. Overusing headers can disrupt the visual hierarchy and hinder navigation, especially for users of screen readers. If your content requires a more structured approach, consider breaking it into separate sections or revisiting the information’s organization to enhance clarity.
Production
Always use heading tags in the correct hierarchical order (e.g., H2 followed by H3, then H4). Do not skip levels or use lower-level headings (like H4) simply to achieve a particular visual size or style. If you want an H2 to appear smaller for aesthetic reasons, you can style it to look like an H4 – but it must still remain an H2 in the code. Inconsistent use of heading tags can confuse learners, break the logical structure of the content, and create barriers for screen reader users. Maintaining both semantic accuracy and visual consistency ensures a more accessible, clear, and intuitive learning experience.