Skip to main content

Headings

Must haves

  1. Each page should have a unique H1 heading 
    1. Tip: there can only be one H1 on the page
  2. The headings should go in order from 1 to 6
    1. Tip: there can be multiple headings at levels 2-6 per page, but they should be used in a logical progression and generally avoid skipping levels (much like how you might created nested bulleted lists)
  3. Heading sizes should be the largest with the H1, and progressively decrease in size through to the H6. The H6 should be no smaller than the size of your body style. 

Learn more about creating headings for accessibility

Headings and Structure overview

Visual example

Heading levels 1 to 6

Do and Don’t

DoDon't
<h1 class="title1">Alumni Engagement</h1>
<h2 class="title2">Events</h2>

<h3>Upcoming Events</h3>

<h3>Past Events</h3>

<h2>Make Connections</h2>

<h3>Become a mentor</h3>

<h3>Find a mentor</h3>

<div class="title1">Alumni Engagement</div>
<h1>Events</h1>

<h4>Upcoming Events</h4>

<h4>Past Events</h4>

<h1>Make Connections</h1>

<h4>Become a mentor</h4>

<h3>Find a mentor</h3>

Here the main heading is not identified as the h1, there are multiple other headings incorrectly identified as h1 when they should be h2, and heading levels are skipped inappropriately.

Last modified