Headings | Essential Practices for Content Creators

Headings are used to organize and provide structure for your content. It also helps users pinpoint the main sections on your web page in a fast and effective way.

Main Heading (H1)

There is one main heading per page. You should never have more than one H1 tag on page.

Tip: Good headings help your search engine results!


Sub-headings (H2-H6)

Sub-headings should be used to create structure for your content. Assistive technologies help users to scan through all headings and identify what the main topics are on the page.

Headings should be concise.

Bad:

Look out for new events happening on campus. Check the links down below for more information.

  • Event 1
  • Event 2
  • Event 3

What’s wrong with this?

Using heading 2 to make a statement stand out on your page is not the intended use of headings. Headings should be short and help structure your content.

Good:

Upcoming Events

Look out for new events happening on campus. Check the links below for more information.


Important topics should be a heading and not bolded text.

Bad:

Events 

  • Event 1
  • Event 2
  • Event 3

What’s wrong with this?

Bolding a word that represents a main topic on the page won’t be read by the screenreader. It will be read as plain text with no significant meaning.

Good:

Events (H3)

  • Event 1
  • Event 2
  • Event 3

Content on a page should have headings that are nested correctly.

Bad:

What’s at Chapman? (H1)

Outdoor Areas on Campus (H1)

Global Citizens Plaza (H3)

Lorem ipsum dolor sit amet, qui eligendi elaboraret ad, in vix consul dictas, qui omnium omnesque ponderum ea. Duo no agam habemus, vim ei duis option, sed id possit prompta. Te eam referrentur definitionem, cum id dicam libris, malis tractatos gloriatur ea vel. Eos cu dicant aperiam probatus.

Attallah Piazza (H3)

Lorem ipsum dolor sit amet, qui eligendi elaboraret ad, in vix consul dictas, qui omnium omnesque ponderum ea. Duo no agam habemus, vim ei duis option, sed id possit prompta. Te eam referrentur definitionem, cum id dicam libris, malis tractatos gloriatur ea vel. Eos cu dicant aperiam probatus.

Bert C. Williams Mall (H3)

Lorem ipsum dolor sit amet, qui eligendi elaboraret ad, in vix consul dictas, qui omnium omnesque ponderum ea. Duo no agam habemus, vim ei duis option, sed id possit prompta. Te eam referrentur definitionem, cum id dicam libris, malis tractatos gloriatur ea vel. Eos cu dicant aperiam probatus. What’s wrong with this? Headings are not structured correctly. “Outdoor Areas on Campus” is a H1 header and the Global Citizens Plaza, Attallah Piazza, and Bert C. Williams Mall are H3 headers. It skipped the H2 level.

Good:

What’s at Chapman? (H1)

Outdoor Areas on Campus(H2)

Global Citizens Plaza(H3)

Lorem ipsum dolor sit amet, qui eligendi elaboraret ad, in vix consul dictas, qui omnium omnesque ponderum ea. Duo no agam habemus, vim ei duis option, sed id possit prompta. Te eam referrentur definitionem, cum id dicam libris, malis tractatos gloriatur ea vel. Eos cu dicant aperiam probatus.

Attallah Piazza(H3)

Lorem ipsum dolor sit amet, qui eligendi elaboraret ad, in vix consul dictas, qui omnium omnesque ponderum ea. Duo no agam habemus, vim ei duis option, sed id possit prompta. Te eam referrentur definitionem, cum id dicam libris, malis tractatos gloriatur ea vel. Eos cu dicant aperiam probatus.

Bert C. Williams Mall(H3)

Lorem ipsum dolor sit amet, qui eligendi elaboraret ad, in vix consul dictas, qui omnium omnesque ponderum ea. Duo no agam habemus, vim ei duis option, sed id possit prompta. Te eam referrentur definitionem, cum id dicam libris, malis tractatos gloriatur ea vel. Eos cu dicant aperiam probatus.


Headings in Cascade CMS

Main Heading

In Cascade, the H1 heading is the “Page Title” field.

screenshot of page with heading 1 identified in red

Image above: Office of Admission is the page title.


Sub-Headings

Cascade widgets such as collapsible regions, tabs, and headings in callout boxes build H2 tags automatically.

screenshot of collapsible regions and tab widget with heading annotationsscreenshot of right column call out with heading annotatedscreenshot of personnel table with h2 heading highlighted


Collapsible Regions

When editing your collapsible regions, there are two scenarios for headings.

1.If the optional heading field is blank, the collapsible region headings would be H2.

collapsible region with headings highlighted

Note: If you plan to use headings within these collapsible regions, the next heading level would be H3.

2. If the optional heading field is filled-in, it becomes a H2 heading and the region headings drop to H3 automatically.

collapsible region with main header filled and annotations on what headings are used

 

Note: If you plan to use headings within these collapsible regions, the next heading level would be H4.


Text Editor

screenshot of content with h2 annotated in red

How to use headings in Cascade CMS:

screenshot of cascade editor showing where to find headings option

Additional Resources


Go to: Getting Started: Web Accessibility