Headings

Headings provide structure and hierarchy to content, making it easier for everyone to understand and navigate a page. For users of assistive technology, headings act like a table of contents—screen readers can announce them and allow quick jumps between sections. Using heading levels in the correct order (H1 for the main title, H2 for subsections, H3 for sub-points, etc.) ensures clarity, supports accessibility, and improves search engine optimization.

Use headings to section out major groups of content on a page. The titles of pages in Modern Campus are by default Heading 1 (and should only be used once), so sections on a page should use H2, H3 within H2, and H4 within H3. Do not use headings out of order. In other words, don't use an H3 unless you have an H2 above it on the page. Avoid using H5 and H6 headings.

A screen reader for the visually impaired will read all of the H2 tags first to allow the user to choose which heading is most relevant to read further into, just like an eye scans a page's headings before reading further.

It's recommended to use an application like (select AP Style as the "Title Case") to format any headings/titles being copied into a Modern Campus field.

Notes:

  • Do not add bold, italics or link to a heading.
  • Do not subsititute a heading for a bold or italiac word or grouping of words.
  • Avoid H5 and H6 when possible.

Examples

H1 Heading
Do not use. The page title is the H1.

H2 Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

H3 Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

H4 Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.