Web Formatting

Use the following content formatting, styling, and accessibility guidelines when creating and maintaining content for the USAC website.

General Styling | Headings | Links | Photos | Tables | Videos

For full details on creating components and webpages, please see the complete USAC Public Website Guide in Gateway. (Requires Gateway access)

General Styling

• Stick to paragraph tags <p> for most content.
  • Avoid use of <div> containers for normal text.
  • Avoid single line returns between lines of text (<br>).
  • Don’t add extra lines between paragraphs.
  • Consider using section headings to divide topics.
• Avoid all caps.
• Calibri is USAC's default font for website content.
• To add emphasis, stick to bold or italic.
  • Italic is best for emphasizing a portion of a sentence.
  • Bold is better for highlighting a special word within a sentence.
  • If you paste text with underline as emphasis, be sure to re-apply the web-appropriate emphasis.

Headings

Headings create an outline for the page, similar to a term paper outline or table of contents.

• The <h1> describes the page as a whole (and should be similar to the page title).
• Headings <h2> through <h4> represent increasing degrees of "indentation" in our conceptual "outline". As such, it does not make sense to skip heading levels, such as from <h2> to <h4>, going down the page.

Do not:

• Use heading tags (<h1>-<h4>) to achieve visual/styling results only, as they are designed to convey a hierarchy for website accessibility purposes.
• Use text formatting to achieve the appearance of headings.

Heading Structure Example

• h1: My Favorite Recipes (Title of page)
  
  • h2: Quick and Easy
    • p: Description
    • h3: Spaghetti
      • p: Description and recipe
    • h3: Tacos
      
      • h4: Chicken Tacos
        • p: Description and recipe
      • h4: Fish Tacos
        • p: Description and recipe
  • h2: Some Assembly Required
    
    • p: Description
    • h3: Tuna Casserole
      • p: Description and recipe
    • h3: Lasagna
      
      • h4: Vegetable Lasagna
        • p: Description and recipe
      • h4: Beef Lasagna
        • p: Description and recipe

Links

The visible text inside a hyperlink is important for both visitor accessibility and search engines.

• Links should be descriptive.
  • Where possible, the text within a link should describe the destination page.
  • Consider including search keywords if they can be including in a natural manner.
• Do not use links with no context such as "Click Here" or long URLs.
• Short links can be used (e.g. usac.edu).
• Do not set links to open in a new window/tab unless the link text explicitly states it will do so.

Photos

• All images must have alternative (alt) text. Alt text should be:
  • Succinct, accurate, and provide an equivalent description of the image.
  • Not redundant with surrounding text and does not use phrases such as "image of" or "picture of," etc.
• All gallery images must have captions. It is the responsibility of the Subject Matter Expert and/or persons submitting photos to provide accurate photo descriptions or captions to be uploaded to website gallery albums.
  • Photo captions should adhere to the following guidelines:
    • Short and informative.
    • Use sentence case.
    • No periods at the end of the caption sentence.
    • No years or dates to keep things evergreen.
    • Do not use student's full names.
  • Examples:
    • Students attend a field trip in Viterbo, Italy
    • Wat Phra Singh Temple - Chiang Mai, Thailand
• Do not use text on images unless it is essential (and alt text is provided).
  • Exception: logos and brand names may use text on images.

Tables

• Tables should be used for representing data and not for styling or separation of content.
• Tables should have headers.
• Avoid spanned (merged) cells.

Videos

• All video materials need to be captioned at 95% accuracy or better. Video with no spoken audio (background music only) is an exception and does not need to be captioned.