Digital

Headings

Further Information

The Visual Identity is a part of the UWA Communications Strategy, and its use must be authorised by the University Website Office.


Page layouts


Page elements


Content containers


Headings are used to break up a page into logical sections; the type of heading selected should reflect the semantic heading order.

A heading format should only be applied to a genuine heading. Heading formats should not be used if you simply want to make text bigger to make it stand out. Text that needs to be highlighted should either be bolded or use a highlightbox.

Examples

This is a Heading 3

The first heading in the content areas (both left and right columns) must be a Heading 3, as the names of the current site and page are displayed in the sandstone banner on every regular page, and have been assigned Heading 1 and Heading 2 respectively.

The first heading in a right column (always a Heading 3) should be labelled Further information where appropriate.

This is a Heading 3 with the "underline" class

Most Heading 3s in the main content area should have the underline class applied, as having each section squared off into segments makes the page easier to scan.

The underline class is not added if the Heading 3 is immediately below a jump list, as the lines above the heading already indicate where the new section starts. In that instance, the heading below the jump list should not have a class applied, and subsequent Heading 3s should have the class overline applied instead.

This is a Heading 3 with the classes "underline margin-right-185"

A heading placed to the left of an image should have the classes underline margin-right-185 applied.

If the image is left-aligned you could use the classes "underline margin-left-185" instead.

This is a Heading 3 with the overline class applied

Overlines are used only when a table of contents is present on a page.

This is a Heading 4

Progressively lower heading levels are used for sub-headings. The Heading 4 style indicates content that is a proper (semantic) child of the Heading 3 under which it lives. It must come after a Heading 3 or follow another Heading 4 element that is its sibling (and the mutual child of a preceeding Heading 3 element).

This is a Heading 5

Although the Headings drop-down menu offers headings through to Heading 6, Heading 5 is the lowest heading level you should use. If you find you are using headings to Heading 6 depth, the page should be simplified and/or split up over different pages.

Implementation in MySource Matrix

Select (highlight) the text you want to format as a heading, and then choose a heading level from the Headings dropdown box. (This is the dropdown to the left of the --select css style -- dropdown in the editor toolbar)

To turn a heading text back into regular text, highlight the heading text and select Normal from the same dropdown menu.

Technical implementation

Headings

 <h3>H3 Heading</h3>
<h4>H4 heading</h4>
<h5>H5 heading</h5>

Heading classes

 <h3 class="underline">Underlined h3 heading</h3>
<h3 class="overline">Overlined h3 heading</h3> (Used when page has jump links or table of contents is present.)
<h3 class="underline margin-right-185">Underlined h3 heading with a 185px margin on the right</h3>
<h3 class="underline margin-left-185">Underlined h3 heading with a 185px margin on the left</h3>