Headings

Capitalisation

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 (<h1>, <h2>, etc). Headings tags should be applied in a hierachy, and levels should not be skipped for appearance. The title of the page should be heading level 1 <h1>, sections should be level 2 <h2>, and subsections should be level 3 <h3> and so on, as shown in the example.

  • 1 Title - <h1>

    • 1.1 Section - <h2>

    • 1.2 Section - <h2>

      • 1.2.1 Subsection - <h3>

    • 1.3 Section - <h2>

Headers

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.

<h2 class="hdr-uni">

<h2 class="hdr-grey">

<h2 class="hdr-college">

Hiding headings

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:

<h1 class="scrnhide">Invisible heading</h1>
 

Page headers

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:

<div id="page-header">Text of header</div>
 

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 formatted in the same style as plain text, with an underline on the hover action.

Updated:  18 August 2017/ Responsible Officer:  Director Marketing/ Page Contact:  Webstyle