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 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 - <h1>

    • 1.1 Section - <h2>

    • 1.2 Section - <h2>

      • 1.2.1 Subsection - <h3>

    • 1.3 Section - <h2>

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:

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

Linked headings

Linked headings should be formatted with the nounderline class and followed by a »:

Example linked heading »

<h3 class="nounderline"><a href="headings.php">Example linked heading &raquo;</a></h3>

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

Updated:  7 June 2021/ Responsible Officer:  Director Marketing/ Page Contact:  Webstyle