Headings

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 to meet 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.

Heading 1 (H1)

Heading 1 tags are used for page titles only.

Heading 2 (H2)

Heading 2 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.

Heading 3 (H3)

Heading 3 tags should come after Heading 2 tags on a page and are used to further define information.

Heading 4 (H4)

H4 tags should come after Heading 3 tags on the page.

Heading 5 (H5)

H5 tags should come after Heading 4 tags.

Heading 6 (H6)

H6 tags should come after Heading 5 tags.

Text

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.

Bulleted Lists

When possible use bulleted lists to present web copy so that it is quickly and easily scannable by audiences. Bulleted lists are styled in the main style sheet, and do not require additional styling.

  • Example 1
  • Example 2
  • Example 3

Link List

Whenever a list of links is created on a page, use the link-list style on a bulleted list.

  1. Create an unordered list
  2. In each list item, link the text to the appropriate location
  3. With the cursor anywhere on the list, click on the Format drop-down on the editor toolbar
  4. Hover over the Formats menu within the Formats drop-down
  5. Select the ul.link-list style

Quotes

To apply the quote style:

  1. Type your text
  2. Highlight the text in the editor
  3. Click on the Format drop-down on the editor toolbar
  4. Hover over the Formats menu within the Formats drop-down
  5. Select .quote

 

“This is a quote example.”

 

Introductory Text

Most pages of the website should include a page intro. They should always appear first on the page and can only appear once on a page. Intro should be no more than two sentences. The larger font size allows key content to be quickly scanned.

To apply the introductory text style:

  1. Type your text
  2. Highlight the text in the editor
  3. Click on the Format drop-down on the editor toolbar
  4. Hover over the Formats menu within the Formats drop-down
  5. Select the .intro style

This is an example of introductory text. It’s typically used right after the page title at the top of the body content of a page.

Buttons

To apply a button style:

  1. Type your text
  2. Highlight the text in the editor
  3. Link the text to the appropriate location
  4. Click on the Format drop-down on the editor toolbar
  5. Hover over the Formats menu within the Formats drop-down
  6. Select a a.button style

Button Example
Button Example

Tables

Tables should only be used to display tabular data but not for creating page layouts.

To create a table:

  1. In the editor toolbar, click the Table drop-down
  2. Hover over Insert Table and hover over the desired number of rows and columns
  3. Insert content into cells – cells can be navigated using the arrow keys

To set a cell as a header cell:

  1. Click into the cell
  2. Click the Table drop-down in the editor toolbar
  3. Hover over Cell and then click Table Cell Properties
  4. Click on the drop-down for Cell Type and select Header Cell

Add the class “responsive-table” to the table tag to create a responsive table to scale for smaller screens.

Header Cell 1 Header Cell 2
cell content 1 cell content 2

 

Example Code:

<table class=”responsive-table”>
<tr>
<th>Header Cell</th>
<th>Header Cell</th>
<tr>
<tr>
<td>Body Cell</td>
<td>Body Cell</td>
</tr>
</table>