Formatting Text

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 use the quote style, simply click the Blockquote icon in the editor toolbar.

“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 the a.button.blue style

Blue Button Example

* The a.button.green style is only to be used when there are two buttons in a row.

Green Button Example

Linking to PDF

  1. When linking to a PDF, make sure to use the appendage (PDF).
  2. All links to PDFs and any external sites should open in a new window.

Captions

Captions are used to set a caption for images and video. To apply the caption 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 .caption style

Remembering Rosa Parks

This is a caption.

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
Header Cell 1 Header Cell 2
cell content 1 cell content 2

To create anchor links, assign an ID tag onto an element, then append that id after a hashtag onto the url. For example, for assigning anchor links onto posts on a transcript page:

  1. Edit the page
  2. Click the Text button on the top right of the text editor
  3. Locate the post title, it will start with <h2>
  4. Within the <h2> tag, add an ID tag equal to the page URL, for example <h2 id=”url-to-the-post”>
  5. Repeat steps 1-4 for all post titles that need a url.
  6. To link the post, add a hash tag and the ID you entered in step 4. For example:
    https://www.mdhumanities.org/news-resources/humanities-connection-transcripts/#url-to-the-post

Example, before:

<h2>Anchor Links</h2></h2>

After:

<h2 id="anchor-links">Anchor Links</h2></h2>

Link (after saving above changes):

https://www.mdhumanities.org/site-guide/page-basics/formatting-text/#anchor-links