Portland Community College | Portland, Oregon

We all want our web pages to be beautiful. The current version of HTML (4.01) provides lots of different ways to change the text of a document. However, the use of HTML to style pages has lead to most pages on the internet being overrun with hundreds of <font>, <b> and <i> tags. These pages not only take longer for the the user to download, but are incredibly hard to update. The standard for the new site is to make use of semantic markup and style sheets to avoid these common problems.

Use Semantic Markup

Stylistic information belongs in the style sheet, not the markup. "Semantic markup" explains what an item is, rather than how it should be styled. This gives the information sections meaning and lets the CSS determine how this meaning will be presented. If you are writing a paragraph use the <p> tag. Need a heading? Use an appropriate H tag. Our main style sheets will then make sure that all your paragraphs and headings are styled correctly. The following guidelines are important to keep in mind:

  • The use of purely presentational HTML markup is discouraged.
  • Avoid the following tags: <font>, <b>, <i>, <big>, <br> and <hr>.
    • Use <strong> and <em> instead of <b> and <i> which do not add meaning.
    • Enclose paragraphs with <p> instead of using <br> for the same reason. Be sure to close the paragraph with </p>.
    • The horizontal rule <hr>, will not even be displayed.
  • For headings, be sure to use the correct heading tag.
  • All other layout and presentation should be handled by CSS. See the adding style (CSS) and available styles.

Heading Tags <H1>

The headings element should be used to briefly describes the topic of the sub-section that follows. They are not meant to be used to emphasize or contrast important sections of text. There are six levels of headings that are defined by the style sheet. Note that first two are reserved and should not be used in the content section of a page.

  • <h1> - Reserved. Used for PCC logo.
  • <h2> - Reserved. Used for section title to describe the current page.
  • <h3> - Top level allowed in content area. Used to divide and define the sections of the content
  • <h4> - Second level in content area. Used to describe sub-divisions of the sections defined by an <h3>
  • <h5> - Third level in content area. Offers further sub-division.
  • <h6> - Final level in content area. Divides lowest of content. If you require more the four levels of division, instead consider reordering the content.

Lists <OL> <UL> <DL>

Formatting information into a list is an easy way to display the structure to content with more then one element. There are several types of lists defined by HTML, each indicative to a particular use. Like paragraphs, be sure to close all list elements (<li>).

  • <ul> - Unordered list: Use for all lists where the order of the elements is not reliant.
  • <ol> - Ordered list: Should only be used where the order of the elements needs to be emphasized.
    • Ordered list can be given a type ( ie. <ol type="A"><li>...)
    • Available types are: 1 (arabic numbers 1,2,3), a (lower alpha a,b,c), A(upper alpha A,B,C), i (lower roman i, ii, iii) I (upper roman I,II,III)
  • <dl> - Definition lists: For displaying term/definition pairs.
    • For each element you must define the term <dt> and the definition(s) <dd>. Multiple definitions for each term are allowed.
    • There are several style classes that can be added to definition lists including: dictionary, concise and collapse. When used in conjunction with the "dl-collapse.js" script, the list will be transformed into a show/hide list.

Adding Style (CSS)

Presentational rules may be added to pages to define extra styles. If multiple pages are going to use the same rules, place the rules in a localized style sheet called 'style.css' and place it on the lowest common level. When creating local styles, the following general guidelines need to be Considered.

  • First check to make sure what you need is not already available.
  • Avoid inline styles. Use class/id identifiers and place the rules with in the head of the current document, or the common style sheet.
  • Create semantic not presentational classes. Creating class="center" is no better than align="center".
  • Changing the style for HTML identifiers (p, a, ul...) is not recommended. If necessary, define only for the content area ( #main p{...} ).
  • Test! Make sure that the page content is readable even if the styles fail. Check using browsers including Netscape and MS Explorer versions 4+. The styles do not have to look consistent across all browsers, but the content needs to be accessible.

Available Styles

To include a run down of available text styles... Also view tables/images...