Standards for Spellings, Formats, etc. Used on Web Team-Managed Websites - Web Team Procedures and Notes

This page is intended for use only by the Web Team.

Standards for Spellings, Formats, etc.

(Modified/reviewed April 3, 2017.)

Note that the Web Team posts content as submitted; no edits are made to submitted content unless it does not follow accessibility laws.

The Web Team tries to use the following standards for the websites we manage; however, no edits are made to submitted content unless it does not follow accessibility laws.

This page is meant as a quick reference for Web Team members. It will not include the whys and hows of each item.

Spelling, Punctuation, Acronyms, Abbreviations, Hyphens, Case, Dates, Times, Ranges, Department/Division Names, More…

  • - do not use
  • email (no hyphen)
  • online (no hyphen)
  • Web - when referring to the World Wide Web specifically
  • web - when not referring to the World Wide Web specifically, as in "web design"
  • website (no space; lowercase)
  • web page (with space)
  • homepage (no space; referring to home.html, index.html, etc. - main page of a website)
  • Internet
  • World Wide Web
  • WebAdvisor (no space; capital W, capital A); link to /go/webadvisor
  • waitlist (no space; lowercase)
  • specify "online Class Schedule" or "searchable Class Schedule" and link to /go/classschedule
  • specify "printed Class Schedule" and do not link to /go/classschedule
  • Catalog - when referring to Ohlone College Catalog - link to /catalog/
  • Building - not Bldg.
  • Room - not Rm.
  • Building 7 - not Building Seven
  • the College - when referring to Ohlone College
  • the District - when referring to the Ohlone Community College District
  • Division - when referring to a specific Ohlone College division (such as Health Sciences Division)
  • Department - when referring to a specific Ohlone College department (such as PTA Department)
  • Initial-cap job titles: Dean, Arts and Social Sciences Division; Counselor; Assistant Director of XYZ
  • Ohlone College campus in Fremont (do not refer to the Fremont campus as the "main campus" - the Fremont and Newark campuses are equal - there isn't a "main campus")
  • Ohlone College, Fremont campus (lowercase campus)
  • Ohlone College, Newark campus (lowercase campus)
  • Ohlone College Newark Center for Health Sciences and Technology
  • Ohlone College Newark Center
  • Ohlone College Newark Center campus
  • Newark Center
  • Student Services Center (Building 7), Fremont campus
  • Newark Student Services Center, Room NC1312, first floor, Wing 3 on the Newark campus
  • For specific references: Fall 2018, Spring 2018, Summer 2018; also: Fall 2018 Semester, Spring 2018 Semester, Summer 2018 Term
  • For general references: Fall semester, Spring semester, Summer term
  • DO NOT USE: Summer session - use Summer term (per someone in Admissions a while ago)
  • Dates:
    • Spell out names of months: January, February, etc.
    • Spell out names of days: Monday, Tuesday, etc.
      • In some data tables, abbreviations such as MWF or MW or T or Th may be used, but only when used with the <abbr title=""> tag (example: <abbr title="Monday, Wednesday, Friday">MWF</abbr> or <abbr title="Thursday">Th</abbr>)
    • When referring to a date, do not use January 1st, March 2nd, December 3rd, etc. - use January 1, March 2, December 3, etc.
    • When the year is not otherwise stated in close proximity to the date, include the year for dates so the site visitor knows exactly what date is referenced - example:
      • The test is held February 20, 2018 from 11:00am to 1:00pm.

      Exception: It is OK to not include years with dates in table data when the table caption clearly includes the year - example table caption: Spring 2018 Orientation Schedule

    • For weekday or month ranges in table cells or body text, use a single space on each side of the hyphen (Monday - Friday, June - August) (BECAUSE: Internet Explorer and some other browsers sees the range as a single word and won't word wrap a hyphenated word or phrase. It is preferrable to have table data word wrap to avoid extra wide table cells, so use a single space on each side of the hyphen.)
    • When necessary to abbreviate dates in table cells (never do it in body text), try to use the full date in global date format: YYYY/MM/DD - think globally (some countries/people use DD/MM/YY or DD/MM/YYYY format instead of the (more common to me!) MM/DD/YY or MM/DD/YYYY format). If you do not use the global date format, specify in the table cell header column that the format is (MM/DD/YYYY) or whatever format is used.
    • For all dates and dated information that change from semester to semester or from year to year (example: schedules, individual dates in text on A&R web pages, etc.), tag each date by inserting a named anchor (i.e., <a id="value"></a>) with the values set to "semesterYYYYdescription". Examples:
      • <a id="spring2017schedule"></a>
      • <a id="fall2017workshops"></a>
      • <a id="fall2017hours"></a><a id="spring2018hours"></a>

      Then, all dates and dated information that need updating after Spring 2017 can be located by doing a search in the Dreamweaver site for id="spring2017 and all named anchors starting with "spring2017" will be found and displayed in Dreamweaver's Search results window. This is so very helpful - I cannot even say how much!!

  • Times:
    • ##:##am or ##:##pm - do not abbreviate times to 8am or 9pm; do not use space before am or pm (no space keeps the am/pm with the time instead of wrapping to the next line making it easier to scan on a web page)
    • am - use immediately after the hour:minutes, without a space in between (9:30am) (not a.m. or AM or A.M.)
    • pm - use immediately after the hour:minutes, without a space in between (5:15pm) (not p.m. or PM or P.M.)
    • Use 12:00pm - not 12:00 noon or 12:00noon or 12noon or 12:00pm noon or 12:00pm Noon.
    • It is also permissible to use 12:00pm (noon) and 12:00am (midnight). Then, noon and midnight could be used thereafter on the page.
    • When indicating a range of times, use am or pm on both times (9:00am - 10:00am, 11:00am - 12:30pm, 1:00pm - 3:00pm) - this makes it absolutely clear when an event starts and ends
    • When indicating a range of times in body text (but not inside a table cell), use "from" and "to" (from 10:00am to 2:00pm) or use a hyphen surrounded by a single space on each side of the hyphen (10:00am - 2:00pm). Don't mix "from/to" with a hyphen; example, do not use: "from 10:00am - 2:00pm".
    • When indicating a range of times inside a table cell, always use 10:00am - 2:00pm (do not use "from" and "to" - takes up too much space in the table cell)
    • NOTE: Web Team styles are different from professional type rules for times which state:
      • 8:00 a.m.
      • 11:00 p.m.
      • 9:00-10:00 a.m. (when both times are in the same period)
      • 11:00 a.m.-2:00 p.m. (when the times are in different periods)
      • blah blah blah from 9:00 to 10:00 a.m. blah blah blah (range in sentences use "from" and "to" not a hyphen)
      • blah blah blah from 11:00 a.m. to 2:00 p.m. blah blah blah (range in sentences use "from" and "to" not a hyphen)
      • In fact, a.m. and p.m. are supposed to be small capped (not ALL CAPPED) which can be done by using the small-capped attribute of a font
      • These common rules were modified for the College website
  • When indicating a range of numbers (whether in body text or in a table cell), use a hyphen or en dash (&ndash;) without surrounding it with spaces (1-3 units, January 15-23).
  • Do not use 1st, 2nd, 3rd, etc. Instead, spell out first, second, third, etc. when referring to an ordered item or a floor number; example: Room 7101, Building 7, first floor, Fremont campus
  • Do not use # as an abbreviation for the word "number" or "Number" (# is a pound sign, not the word "number")
  • Do not use an ampersand (&) as an abbreviation for the word "and". Use & only when it is used in the actual name of an organization or department.
  • For lists of links in the body of a page, use the definition list tags (<dl>, <dt>, <dd>) when each link is followed by a definition, description, or summary.

    OR use the unordered list tag (<ul>) when each link is not followed by a description or summary.
  • HTML page titles use "XYZ Department" or "XYZ Division"
  • For room numbers, use Room #### (no hyphen). For the first mention on a page, use Building #, Room #### then use Room #### thereafter as long as room number is the same. Notes:
    • For Hyman Hall room numbers, use a hyphen after HH: Room HH-###, Hyman Hall, first/second floor, Fremont campus
    • For Smith Center room numbers, use a hyphen after SC: Room SC-###, Smith Center at Ohlone College, basement/first/second floor, Fremont campus
    • For Newark Center room numbers, DO NOT use a hyphen after NC: Room NC####, first/second floor, Wing #, Newark campus
    • When using HH-### and/or SC-### and/or NC#### in a table, include a "key" following the table if Hyman Hall or Smith Center or Newark Center are not specified before the room number; examples: HH = Hyman Hall; SC = Smith Center; NC = Newark Center.
    • No room number is required for "Jackson Theatre, Smith Center at Ohlone College", "NUMMI Studio Theatre, Smith Center at Ohlone College", "Louie-Meager Art Gallery, Smith Center at Ohlone College", "Smith Center at Ohlone College, Jackson Theatre", "Smith Center at Ohlone College, NUMMI Studio Theatre", or "Smith Center at Ohlone College, Louie-Meager Art Gallery".
  • Use Theatre not Theater when referring to Jackson Theatre, NUMMI Studio Theatre, Theatre and Dance Department, and Amphitheatre at Ohlone College.
  • The full "Gary Soren Smith Center for the Fine and Performing Arts" is preferred and should be used whenever possible as the first reference to the Smith Center on a page. Note: Do not ever use "&" - always use "and".
  • Use "Smith Center at Ohlone College" when not using the full "Gary Soren Smith Center for the Fine and Performing Arts"
  • In a data table, it is permissible to use just "Smith Center" without writing out the full name on the page
  • Acronyms and abbreviations - See Acronyms and Abbreviations
  • An good method for handling acronyms and abbreviations (also very accessible and good for printed pages) is to spell out the first instance of the term followed by the abbreviation in parenthesis and then use the abbreviation for the remainder of the page; example:
    • Associated Students of Ohlone (ASOC).
  • Alternatively, acronyms and abbreviations could use <abbr> tag with appropriate title attribute for first use on a page; examples:
    • <abbr title="Associated Students of Ohlone">ASOC</abbr> - example: ASOC
    • <abbr title="American Telephone &amp; Telegraph">AT&amp;T</abbr> - example: AT&T
    • <abbr title="English as a Second Language">ESL</abbr> - example: ESL

    The title attribute should indicate the full name of what the abbreviation is for.

  • For an elipses, do not use 3 periods. Instead, use &hellip; (which displays like this: …). Do not use a space before or after, unless at end of a sentence.
  • Common Special Characters: Use encoded entities as follows (nice list):
    • &#39; ' Apostrophe (note: &apos; IS NOT VALID and is not recognized by IE 7)
    • &hellip; or &#8230; … Horizontal Ellipsis
    • &mdash; or &#8212; - Em Dash (size of m in current font)
    • &ndash; or &#8211; - En Dash (size of n in current font)
    • &lsquo; or &#8216; ' Left Single Quotation Mark
    • &rsquo; or &#8217; ' Right Single Quotation Mark
    • &ldquo; or &#8220; " Left Double Quotation Mark
    • &rdquo; or &#8221; " Right Double Quotation Mark
    • &#8226; • Bullet (larger than the Mid-Dot ·)
    • &#8482; ™ Trademark Sign
    • &#247; ÷ Division Sign
    • &#188; ¼ Quarter Fraction
    • &#189; ½ Half Fraction
    • &#190; ¾ Three-Quarter Fraction
  • Use named entities for these special characters (nice list):
    • &nbsp; Non-breaking Space
    • &quot; " Double Quotation Mark
    • &amp; & Ampersand
    • &cent; ¢ Cent Sign
    • &lt; < Less Than Sign
    • &gt; > Greater Than Sign
    • &frac14; ¼ Quarter Fraction
    • &frac12; ½ Half Fraction
    • &frac34; ¾ Three-Quarter Fraction
    • &laquo « Left Angle Quote Marks
    • &raquo » Right Angle Quote Marks
    • &copy; © Copyright
    • &reg; ® Registered Sign
    • &deg; ° Degree Sign
    • &plusmn; ± Plus or Minus Sign
    • &#247; &divide; division sign
    • &aacute; á Small a, acute accent
    • &eacute; é Small e, acute accent
    • &middot; · Middle Dot (Mid-Dot) (smaller than the Bullet •)
  • OK to use hyphen without spaces instead of en dash for numeric durations (example: 1-3 days, January 15-17, May 20-21). If use en dash, do not use spaces around &ndash;.
  • Do not use multiple hyphens for a dash because -- doesn't word wrap correctly in some browsers
  • Instead of using a hyphen for a dash, use an em dash (&mdash;) - do not use spaces around &mdash;. It is OK to use a single hyphen but use one space on each side of it.
  • OK to use ' and " instead of curly quotes or smart quotes for 'single quotes' (&lsquo; and &rsquo;) or "double quotes" (&ldquo; and &rdquo;)
  • Although it is OK to use ' (straight single quote) for feet and " (straight quote) for inches when following a number (example: 6' 2"), it is better to use the proper encoding:
    • &prime; ′ for feet
    • &Prime; ″ for inches
  • Use an apostrophe where a letter or letters is missing:
    • Hall o' Fame
    • Rock 'n' Roll
    • gone fishin'
    • When talking about decades, use '90s or 1990s
    • When talking about ages or numbers, use 90s
    • Do not use an apostrophe before the s in '90s or 90s (don't use: 1990's or 90's - these are not possessive).
    • Use As not A's; example: He gets As and Bs. (As and Bs are not possessive.)
    • Use ABCs not ABC's; example: She knows her ABCs. (ABCs is not possessive.)
  • Do not use ALL CAPS, especially not for headings since they're already bolded and enlarged - or use CSS to change font to small caps for the heading. If you must use ALL CAPS (i.e., the client is stubbornly requiring it!), use it SPARINGLY and use <strong> or <em> tags around the word/phrase (so screen readers will get the emphasis too).
  • For emphasis, use <em> (which usually italicizes) or <strong> (which usually bolds). Do not use <i> or <b>.
  • It is proper (but not required by the WT) to include punctuation (comma, semi-colon, colon, period, etc.) following a word or phrase in the emphasized text. Examples: italicize, (the comma is included in the italicized text) and strong: (the colon is included in the bolded text)


  • CSS font sizes: set body font-size to 100% then set adjustments to font-size using em
  • Do not open new windows (they are accessibility problems!) unless absolutely necessary or otherwise makes sense in content and user is notified. Do not use target="_blank" or Javascript or any other method to open new windows, not even with a "title" attribute on the anchor (<a>) tag or "(new window)" on the link text. (This is for ease of usability for non-savvy site visitors, as well as accessibility for people using alternative technologies to browse our website.)
  • Crop all people "portrait" images to a standard size of 150px x 175px at 72dpi (example: for photos next to contact info)
  • Use null/empty alt attribute (alt="") on <img> tag of photos next to contact information - because if alt="John Jones" is used on the <img>, a screen reader reads that description AND the name of the person (which means that the name is read TWICE)
  • The alt attribute of an image is a description of what the image looks like. The caption is different - it is the name of the place or person pictured, or the title of an artwork. Do not use an image caption as the alt attribute for the image.
  • When an image with a caption has a link, make sure the <img> tag and the caption for the image are surrounded by a single <a> tag; example: <a href=""><img src="" width="100" height="25" alt="" /><br />Amazon Logo</a>
  • Video/audio transcript filename: xxxxxxxxxxxxxx-transcript.html
  • Video/audio transcript title: Video Transcript: xxxxxxxxxxxxx
  • Use "USD" after dollar amounts: $18 USD, or $1 USD, $0.50 (50¢) USD - think globally (¢ is &cent;)

  • For contact information in staff or faculty listings etc., order each line of info as indicated:
    • Firstname (Nickname) Lastname, DegreesCertsLicenses


      Department or Division

      Voice (###) ###-####

      TDD (###) ###-####

      Fax (###) ###-####

      Room ####, Building #, first/second/third/etc. floor, Fremont/Newark campus

    • Firstname (Nickname) Lastname, DegreesCertsLicenses


      Department or Division

      Voice/TDD (###) ###-####

      Fax (###) ###-####

      Room ####, Building #, first/second/third/etc. floor, Fremont/Newark campus


    • Optional: Department or Division - usually only when person is being listed on a website OTHER THAN that Department/Division site
    • Optional: DegreesCertsLicenses (don't include periods) - ex: PhD, MS, RN
    • Not everyone has a fax or TTY or TDD or Video Phone phone, so they are optional in front of a phone number. When a "Video Phone" number is listed, "Voice" may be used before the voice telephone number.
    • Do not use "Location:" or "Office Location" unless it is not clear that the location is, well, a location.
    • Additional information about the person (such as office hours or special interests) should follow the Location on a new line and be preceeded with a descriptive label followed by a colon and space (example: Interests: ).
    • If only one name appears, it is not necessary to put the information in an unordered list (<ul>).
    • In a list of multiple names are used in the list, use an unordered list (<ul>) with one name on each bullet and a paragraph tag for each <li>.
    • (###) ###-#### - do not preceed with label of "Telephone", "Telephone Number", "Phone", or "Phone Number", etc.; use a space before the closing parenthesis; use a hyphen between the 7 digits; if TDD number is listed, "Voice" may be used before the non-fax telephone number.
    • (###) ###-#### x#### - for extensions, use x#### - do not use "Ext." or "ext." or "extension" etc.
    • Place type-of-phone labels BEFORE the phone number so a screen reader user knows what type of phone number it is before it is read. example:
      • Video Phone (###) ###-####
      • Fax (###) ###-####
    • - do not preceed with label of "Email:" or "Email address:" etc. (always encode email addresses)
  • Use the full telephone number format in lists, tables, and text. Do not leave off the area code or abbreviate a phone number to the extension. Site visitors may not know what the area code is or what the extension's prefix is.
  • Encode (use character entities) all email addresses when used in the mailto link and when used in body text; optionally encode the "mailto:" in the href.
  • Do not use a mailto link on a person's name. If the mailto link is not visible on the web page, it won't be visible if the page is printed. Also, site visitors using GMail or Yahoo or Hotmail or computers without configured email clients will need to see the email address so they can write it down (or print the page).
  • Firstname (Nickname) Lastname - Nickname is optional; if used, the person can be referred to later on that page by the nickname and lastname in lieu of firstname lastname.
  • Do not refer to people by only their firstnames or nicknames.
  • Some people are more formal than others. If someone wants to be referred to as Dr. or Professor, then use that title. Abbreviate Dr. Do not abbreviate Professor (do not use Prof.). Examples:
    • Dr. James Smith
    • Dr. Smith (after using Dr. James Smith previously on the page)
    • Professor Ann Johnson
    • Professor Johnson (after using Professor Ann Johnson previously on the page)
  • When indicating a person or organization/department to contact in a sentence, use the long form of the telephone number and/or display the email address with the mailto link around the email address:
    • Contact the Student Health Center at (###) ###-#### or for further information.
    • Contact Firstname Lastname at (###) ###-#### or for further information.
    • Contact Firstname Lastname at for further information.
    • Contact Firstname Lastname at (###) ###-#### for further information.
    • For additional information, contact Firstname Lastname at (###) ###-#### or

    The phone number can preceed the email address but the entire page should be consistent. If phone number is a TDD, it must be labeled as such (example: TDD (###) ###-####)

  • Headings and column headings in tables should not be followed by a colon (the colon is read by screen readers each time the column is identified; example: The column heading "Course Number:" is read as follows: Course Number colon)
  • Where it makes sense (think about site visitors wanting to print the page of links), website off-site URLs (i.e., to non-College sites) used in the body text should always be formatted using http:// and linking to the URL; example: http://subdomain.domain.ext/
  • Lists of links can be formatted using a definition list (<dl>, <dt>, <dd>) or unordered list (<ul>) with the URL assigned to the Link Text or Title, a <br /> tag, then the http:// link as text (October 28, 2004: This is a change from what we were doing - all pages with the old format have been changed):

    List of links with summaries using definition list:

    Link1 Text or Title
    Summary or descrption of the link. Blah blah blah. Blah blah blah.
    Link2 Text or Title
    Summary or descrption of the link. Blah blah blah. Blah blah blah.
    Link3 Text or Title
    Summary or descrption of the link. Blah blah blah. Blah blah blah.

    List of links without summaries using unordered list:

    Putting the URL on the Link Text or Title allows screen reader users to follow the link upon hearing the Link Text, instead of waiting for the URL to be read back. Putting the URL in the text allows site visitors to print the page of links and refer to the page for the URLs.

  • For complex images or Flash animations, etc. - do ALL of these:
    1. use "longdesc" attribute on the <img> tag for complex images (not for Flash animations or other non-<img> tag media) to refer to a web page containing a long description of the complex image:
      <img src="" width="400" height="500" alt="" longdesc="" />
    2. use "d" link after the complex image:
      • use lowercase d surrounded by parentheses: (d)
      • link goes on the d only - does not include the parentheses: (d)
      • use "title" attribute on the anchor tag with "Long description of IMAGEDESCRIPTION."
      • Example of "d" link code:
        (<a href="https://longdesc-compleximage.html" title="Long description of Coffee Drinkers by month in 2008.">d</a>)


    3. insert a jump link tag after the image and d link where the natural flow of information continues:
      <a name="returnfromlongdesc" id="returnfromlongdesc"></a>
    4. create the "longdesc-name.html" web page:
      • use <dtml-var> and <dtml-var>
      • the <h1> heading is "Long description of IMAGEDESCRIPTION"
      • at bottom of page (after the long description), include a jump link back to location just after the image:
        <p>Return to <a href="https://foodservices.html">Food Services - Coffee</a>.</p>

Recommended books about type (all target print rather than web which has limitations with regard to type):

  • The PC is Not a Typewriter (or The Mac is Not a Typewriter) by Robin Williams
  • The Non-Designer's Type Book: Insights and techniques for creating professional-level type by Robin Williams
  • The Elements of Style by William Strunk, Jr. (available online at