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.
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.
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.
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.
Note: If you plan to use headings within these collapsible regions, the next heading level would be H4.
Text Editor
How to use headings in Cascade CMS:
