Headings
A heading is a typography component used to display text in different sizes and formats.
Breakdown
Heading
A heading is used for all content titles and subheadings to introduce sections of content. Headings are used for visual hierarchy and to help readers understand the structure of content on a page.
Heading 1 <h1>
Heading 2 <h2>
Heading 3 <h3>
Heading 4 <h4>
Heading 5 <h5>
Heading 6 <h6>
Eyebrow
A prefix piece of content that sits above a H1 or H2 heading that helps explain to provide further context to a heading but may not be useful for SEO.
Eyebrow
Lead
Lead content is used for an introductory paragraph. Often used within header banners to summarise a pages content. Lead uses 20px type and are used sparingly on a page.
This is a lead style.
This is a lead style.
Paragraph
The default paragraph font size is 18px.
This is a paragraph style.
This is a paragraph style.
Serif
Serif is exclusively used for reports and official long form documentation. The default paragraph font size is 18px.
This is a paragraph style.
This is a paragraph style.
Links
Links use the default underline and familiar hyperlink blue, it does not use the RSPCA blue. If your link is at the end of a sentence or paragraph, the linked text should not include the full stop.
Accessibility
- The most important heading has the tag <h1>, the least important heading has the tag <h6>. There should only be one <h1> heading per page, this content explains the content of the page. Headings with an equal or higher number start a new section, headings with a lower number start new subsections that are part of the higher ranked section.
- Never skip lower heading levels. For example, a <h2> heading shouldn't be followed by an <h4>. It should be followed by an <h3> if the content sits in the same section as the <h2>, or by another <h2> if its the same level of importance.
- While content may be visually styled to appear before the heading, for example a tag that provides categorisation or other content, it should be placed after the heading in the document source order.
- Heading levels must reflect a logical, page-wide hierarchy. If the content related to a heading includes further sub-headings, these must hierarchically be at least on level deeper. Ideally, no heading levels should be skipped.
