Headings
Web Style Guide
Proper use of headings is essential for structuring web pages, improving readability, and enhancing accessibility for all users.
- Headings visually break down content into sections, making it easier for users to scan and understand the page.
- Screen readers rely on headings to convey the structure of a web page, allowing easier navigation and access to information.
- Headings are also important for SEO as search engines use them to understand page content.
Heading Levels
HTML Headings are available in six different levels which should be used, in order, to create sections and subsections of content. Skipping heading levels should be avoided wherever possible in order to create a logical structure with maximum accessibility.
When editing a page, select some text and choose the appropriate level for your heading from the Paragraph dropdown menu in the toolbar.
-
Header 2
-
Header 3
-
Header 4
-
Header 5
-
Header 6
Font styles and sizes for headings are set in the site’s stylesheet and cannot be changed in the editor. Never choose a heading level based on appearance. Always choose the appropriate level based on the structure of the page.
Note: Header 1 is not available in the menu because it is reserved for only the page title, which is set automatically in the template.
Styling Headings
In some contexts, the default size of a heading is not desired. A special format is available that can set any heading to a consistent size, regardless of the level. Select some heading text and choose “Title Text” from the Formats dropdown in the toolbar.
This is an example of a Heading 2 with the Title Text format applied.
A similar format option is available for creating subtitles from any text. Select some text and choose “Subtitle Text” from the Formats dropdown. This can also be applied to paragraph text to give the appearance of a heading without the structure of one.