Semantic Headings

Purpose

  • Provides structure to a page
  • Enables users to navigate a page quickly
  • Most screen readers allow users to navigate via semantic headings on a page

Use

  • Nest headings by their rank
  • Do not skip headings
  • Do not use headings to create large spacing

Hierarchical Layout

  • H1 – Main topic of the page
    • All content pages must have one, and only one, H1
    • In Omni, if a page contains a banner with caption, that counts as the H1
  • H2 - Used to identify major sections of the page
  • H3 - Subheads within a major section of content
  • H4 - Subheads within H3s
  • H5, H6 - these will rarely be used; remember levels should never be skipped

Tips

  • Additional styles should not be applied to semantic headings
  • Never use bold, italicize, underline, etc. to define sections on your site instead of headings