Headings should use sentence case - only the first letter and any proper nouns should be capitalised.
Tags & hierarchy
To make pages easier to scan and understand, and to improve the accessibility of your content, headings should be used and marked up with heading tags (
<h2>, etc). Headings tags should be applied in a hierarchy, and levels should not be skipped for appearance.
The title of the page should be heading level 1
<h1> - with each page containing only one level 1 heading, sections should be level 2
<h2>, and subsections should be level 3
<h3> and so on, as shown in the example.
1 Title -
1.1 Section -
1.2 Section -
1.2.1 Subsection -
1.3 Section -
There might be times when a visible heading is not desirable, but you would still like to convey the structure of the page to people using assistive technologies such as screen readers. In this case, you can use the
scrnhide class to hide the heading. For example, the following code will add an invisible heading to the page which will be read by screen readers:
Linked headings should be formatted with the
nounderline class and followed by a »:
A set of special classes is also available that formats headers in small caps. While this class should normally be applied to heading tag elements, it can also be applied to text elements such as paragraphs and list items.
Note that the
college-hdr class will automatically render in 100 per cent of the college colour.
Page header is a special heading style that can only be used once per page and is intended for elements such as the name of a school or unit (that does not appear in the banner), or for chapter headings and other 'sub-headings'.
The code should be placed directly above the first item on the page in the form of:
If your homepage contains a banner image or feature bar, the page header may be placed underneath - on the homepage only, not subsequent pages. As with all other content area elements, the page-header div must be included within a grid class.
Links may be included within the page header - these will be formatted in the same style as plain text, with an underline on the hover action.