Using Headings

Organizing your page using properly marked up headings, is one of the most important things you can to do help make your content accessible for all users.


How to Use Headings

Headings should always having heading levels applied using the dropdown in the editor toolbar.

There are six heading levels and they should always be used in the proper order. 

Heading 1 (H1) is always the page title, so you should not use this level within the content.

Heading 2 (H2) should be the headings for the main sections on your page

Heading 3 (H3) should be headings for subsections within a Heading 2 section.

Heading 4 (H4) should be headings for subsections within a Heading 3 section.

Heading 5 (H5) should be headings for subsections within a Heading 4 section.

Heading 6 (H6) should be headings for subsections within a Heading 5 section.

You should never skip levels (e.g. starting your content with a Heading 3) or create your own headings using text sizes, bolding, text color, etc. You can however apply text styles to properly marked up headings.


Example of Headings

Notice that this heading is an H3 because it is within an H2 section.

You can think about headings like bulleted or numbered lists. If content is at the same level, they are expected to contain different content. If content is nested within a list item, it is expected that content is related to the list item above it.

  • Heading 1 (H1) is always the page title
    • Heading 2 (H2) is a section of content on the page
      • Heading 3 (H3) is a section within the H2
        • Heading 4 (H4) is a section within the H3
    • Heading 2 (H2) is a section of content on the page
      • Heading 3 (H3) is a section within the H2
      • Heading 3 (H3) is a section within the H2
    • Heading 2 (H2) is a section of content on the page

Headings communicate the organization of the content on the page. Users skim web content looking for the information most relevant to the task they are trying to perform. Good headings will help them find the content they need.

Headings are also essential for accessibility. Web browsers, plug-ins, and assistive technologies can use appropriately marked up headings to provide in-page navigation (see the W3 accessibility guidelines).

Finally, search engines use headings in identifying your page's content and ranking search engine results. Good use of headings will help make your content more findable by your intended audiences.

In addition to marking your headings with the appropriate structure, writing good headings will help your users. Some general guidelines:

  • Keep headings short
  • Use active language – consider starting each with an active verb (e.g. Apply, Find, Watch, Upload, etc.)
  • Make headings consistent (e.g. all formatted as questions, all using active language)
  • Do not use all caps (this is difficult to read)
  • Avoid acronyms or jargon