Headings define a document's structure. Proper headings help readers quickly scan text for relevant information. They also help to create a hierarchy of information, as each heading tag carries a certain visual weight. Heading 1 defines the most important heading. Heading 6 defines the least important heading. In addition, each heading can be read as a child of the heading before it.
Search engines use headings to index the structure and content of web pages. Using headings is also essential for meeting web accessibility guidelines. Screen-readers discover document structure by creating lists of all the headings of each page of the website.
The headings used throughout the site are displayed and defined below. All headings are available in the page editor's Format menu.
Titles are used for page titles only, they cannot be selected by the editor. They are automatically generated on templates by the text entered as a page's title. To edit a title, move your mouse over the title text and select Edit.
Heading 1 (H1)
H2 tags are used commonly throughout the site to provide a title to main content on a page, or to clearly divide a page into two or more topics. To apply a Heading 1, highlight the text and choose Heading 1 from the Format menu.
Heading 2 (H2)
Heading 2 tags should come after Heading 1 tags and are used to further define information. To apply a Heading 2, highlight the text and choose Heading 2 from the Format menu.
Heading 3 (H3)
H3 tags should come after Heading 2 tags. They are gray and bold. To apply a Heading 3, highlight the text and choose Heading 3 from the Format menu.
Heading 4 (H4)
H4 tags should come after Heading 3 tags. To apply a Heading 4, highlight the text and choose Heading 4 from the Format menu.
Heading 5 (H5)
H5 tags are rarely used. If needed, H5s can be used for captions. To apply a Heading 4, highlight the text and choose Heading 5 from the Format menu.
All body copy is Droid Sans. Droid Sans is a free embedded Google Web Font. The copy is formatted in the main style sheet and should only require bold and italic as needed. It is important to avoid underlining, as it makes text appear as links.
When possible use bulleted lists to present web copy so that it is quickly, and easily scannable by our audiences. Bulleted lists are styled in the main style sheet, and do not require additional stying. To apply a bulletted list, use the Bulleted List button on the editor bar. If the bulleted list contains all links, use a special class to apply blue arrows (see Links.)
- Example 1
- Example 2
- Example 3