HTML Guidelines

Text Colors

With the sole exception of the <h1> heading, all text is dark blue; the official numeric value is #000033. The color for the <h1> heading -- REQUIRED on all pages -- is dark red. The numeric value of this color is #cc0000.

Text colors and fonts are restricted to the university and library colors as dictated by the style sheet. DO NOT use color=" " markup in your HTML code.

Typefaces/Fonts

The official font is Verdana, which should be available on both Windows and Macintosh systems for proper rendering.

The typefaces and fonts are restricted by the Library's style sheet. DO NOT use <font> tags in your HTML code.

Heading Tags

There are several different levels of heading tags available to use, h1 through h6. As the heading number increases, the size of the text decreases, and these tags should be used in order, as you would do in an outline.

The <h1> heading, at the top of the web page directly underneath the banner, will always be red and aligned in the center of the page. There should be one and only one red <h1>-level heading on a page, written in the .shtml file. The <h1> heading is a REQUIRED element on all pages.

Example:

<h1> h1-Level Heading </h1>

Usually, the first <h2> will come directly below the red <h1> heading, though it is written in the .txt file.

Examples:

<h2>h2-Level Heading</h2>

<h3>h3-Level Heading</h3>

<h4>h4-Level Heading</h4>

<h5>h5-Level Heading</h5>

<h6>h6-Level Heading</h6>

"Containers"

All text on the web page must be "contained" -- that is, put within a set of tags. There are a few sets of tags that are considered containers:

• <p>paragraph tags</p>
• <li>List item tags
  • to be used ONLY inside <ul>Unordered List</ul> or <ol>Ordered List</ol> tags</li>
• <dt>definition type tags<dt> and <dd>definition list definitions</dd>
  • to be used ONLY inside <dl>Definition List</dl> tags

Headings are technically containers as well, but all of them carry their own special formatting.

When text is left "uncontained" -- for example, if you use an opening <p> tag, but not a closing one, or an opening <li> but not a closing one -- in most browsers, the text will appear larger and sometimes in a different typeface than the "contained" text elsewhere on the page. That can make your page appear off, or badly constructed.

NOTE: You should contain text inside table cells as well -- for example, if you have a table with text inside, your code should look something like the following:

<table>
<tr>
<td>
<p>Your text goes here</p>
</td>
</tr>
</table>

Tables and Table Cell Background Colors

Using background colors in tables is not preferred. The UIC indentity standards advocate the use of bold, primary colors instead of pale pastels. Using such colors in tables will make text difficult to read.

< Back to the Style Guide Index

Last updated: Monday, 14-Aug-2006 13:54:01 CDT