Standard 7a

✔️ Headings are properly tagged (h1-h6) and used in the correct hierarchy.

Review These Explanations

Properly tagging headings (h1-h6) and organizing them in the correct hierarchy is essential for an online course’s success. Headings in HTML are coded elements utilized to convey the hierarchical structure of your HTML document. These are represented by tags such as <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>, each corresponding to a different level in the hierarchy. Web Accessibility Initiative states “The most important heading has the rank 1 (<h1>), the least important heading rank 6 (<h6>). Headings with an equal or higher rank start a new section, headings with a lower rank start new subsections that are part of the higher ranked section” (2017). This practice enhances accessibility for users with disabilities, ensuring a structured and meaningful experience through assistive technologies. Additionally, it positively influences search engine optimization, as search engines rely on heading tags to understand content hierarchy. From a user perspective, clear headings aid navigation and content comprehension, contributing to a more readable and scannable learning experience. Consistent use of heading tags maintains a professional appearance, facilitates content editing and maintenance, and supports responsive design for various devices. Having a well-structured heading system plays a pivotal role in enhancing usability, accessibility, and the overall effectiveness of an online course.

 

Refresh Your Course with These Ideas

General Suggestions:
  • Familiarize yourself with heading ranks, structured in a hierarchy from h1 (highest rank) to h6 (lowest). Ensure logical structure, with h1 as the main heading and subsequent headings (h2-h6) representing sub-sections.
  • Review online course content, identifying main topics and subtopics. Organize information into sections and subsections based on importance and logical organization.
  • Use h1 for the main course or module title. Assign subsequent heading levels (h2, h3, etc.) for section and sub-section titles in a logical order, accurately representing content organization.
  • Go through each course page or module, reviewing existing headings. Make necessary adjustments to ensure proper tagging and correct hierarchy. Update HTML code accordingly.
  • Ensure consistency in heading usage across the course. Use the same heading levels for similar content types to enhance readability and aid user understanding of the course structure.
  • Utilize accessibility tools or browsers with built-in features to test headings. Verify that users with disabilities, including those using screen readers, can navigate content seamlessly.
  • Continuously consult W3C guidelines and the provided link for additional details and best practices. Leverage insights from W3C for creating accessible and well-structured content.
  • If using templates or stylesheets, ensure they support proper heading hierarchy. Update templates or style sheets as needed to maintain consistency in heading usage throughout the online course. 

 

Examples

             


References: 

MozDevNet. (2023). <h1>–</h1><h6>: The HTML section heading elements – HTML: Hypertext markup language: MDN</h6>. MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements 

W3C Web Accessibility Initiative(WAI). (2017). Headings. Web Accessibility Initiative (WAI). https://www.w3.org/WAI/tutorials/page-structure/headings/#:~:text=heading%20after%20navigation-,Heading%20ranks,of%20the%20higher%20ranked%20section.