Web Style Guide

Coding Guidelines

Web Standards

University Web site pages should be coded according to modern Web standards.

University Web pages should conform to the following W3C DOCTYPE: XHTML 1.0 Transitional

Example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Web page code should be validated using an appropriate validation tool (such as the W3C Validator) to ensure conformance to the appropriate document type definitions.

Mandatory document structure

Every Web page should be made up of meaningful structural elements. The most common elements to include are:

  • Container Elements
  • Headings
  • Paragraphs
  • Tables
  • Lists

Container Elements

<div> and <span> are container elements. They are used to create an arbitrary document structure as needed.

<div> elements are used to create elements which stand apart from the document flow. The <div> element functions much like a paragraph <p> element.

<span> elements are used to create containers which occur inline with the document flow. The <span> element functions much like a <strong> or <em> elements.

"id" attributes are used primarily in <div> and <span> elements to identify unique instances of these containers. The id attribute enables Cascading Style Sheets to target specific elements in the Web page.
"class" attributes are used primarily in <div> and <span> elements to identify unique instances of these containers. The id attribute enables Cascading Style Sheets to target specific elements in the Web page.

Example:

<div id="masthead">
<h1>CSU Channel Islands</h1>
</div>

<div class="navigation">
<h2>Page Navigation</h2>
<a href="link1.htm">Link 1</a>
<a href="link2.htm">Link 2</a>
<a href="link3.htm">Link 2</a>
</div>

Headings

Each page section should have a meaningful, written heading, and marked using appropriate heading elements in HTML.

All Web pages will have at least one section of text.

Page title text within the <body> element should always be designated with a <h1> element.

Example:

<body>
<h1>About the Project</h1>
<p>This project is managed by Information Technology at CSU Channel Islands.</p>
<h2>Project Teams</h2>
<p>Two project teams provide support to the University community.</p>

Sub-headings <h2>, <h3>, <h4>, <h5>, <h6>, <h7>

Example 1:

Page sections using the same sub-heading element have the same level of importance in the document structure.
In this example, the page sections "Project Teams", "Contact Us" and "Related Links" have the same level of importance because they all use the <h2> heading element.

<h2>Project Teams</h2>
<h2>Contact Us</h2>
<h2>Related Links</h2>

Example 2:

Items using the next higher numbered sub-heading represent a subsection.
In this example, "Strategy Team" and "Design Team" are both sub-sections of the "Project Teams" section.

<h2>Project Teams</h2>
<h3>Strategy Team</h3>
<h3>Design Team</h3>
<h2>Contact Us</h2>
<h2>Related Links</h2>

Headings cannot be used out of sequence.

Example 3 (Incorrect Code):

<h1>About this project</h1>
<h2>Project Teams</h2>
<h4>Strategy Team</h4>

The <h4> element in the above example implies that a prior subheading marked with <h3> must be previously specified in the HTML code. Because there is no <h3> element, this code is not semantic.

Paragraphs

Paragraph text should be surrounded with paragraph elements <p>

Example:

<p>The quick brown fox jumped over the lazy dog.</p>

will display:

The quick brown fox jumped over the lazy dog.

Paragraphs can be split into multiple lines using line break <br /> elements.

Example:

<p>The quick brown fox jumped<br /> over the lazy dog.</p>

will display:

The quick brown fox jumped
over the lazy dog.

Empty paragraphs are discouraged, as they are not semantic, but they are acceptable.

Example:

<p> </p>

Tables

Tables should be used to format data as a grid, in rows and columns. 

Data tables must not contain non-tabular data or table headings. For example, do not incude directions or instructions on table interpretation in any table cell. 

The "summary" attribute must be used within the <table> element in data tables to provide a short but meaningful summary of the table.

Example: <table summary="Lists names and email addresses of contacts">

Data tables must contain appropriate row and column headings.

Example Table #1:

Name Email Address Building Location
Help Desk helpdesk@csuci.edu Broome Library
Police Department police@csuci.edu Placer Hall

Example Table Code:

<table border="1" summary="Example table showing contact information and how to use table header elements and table summary attribute correctly" width="100%">
<tbody>
<tr>
  <th scope="col">Name </th>
  <th scope="col">Email Address </th>
  <th scope="col">Building Location </th>
</tr>
<tr>
  <td>Help Desk</td>
  <td>helpdesk@csuci.edu</td>
  <td>Broome Library</td>
</tr>
<tr>
  <td>Police Department</td>
  <td>police@csuci.edu</td>
  <td>Placer Hall</td>
</tr>
</tbody>
</table>

Data table headings must be marked using <th> elements

Table <th> elements must use the scope attribute

  • Use "row" for row headings
  • Use "col" for column headings

Example: <th scope="col">Email Address</th>

Complex data tables (which have more than 2 logical levels of information) should be formatted using the "headers" and "id" attributes.

Use of layout tables is strongly discouraged. Instead, design using <div> and <span> container elements, and format layout using Cascading Style Sheets.

The look of tables (cell padding, cell spacing, table border colors/styles, cell widths, etc.) should be modified using Cascading Style Sheets.

Lists

The appropriate list elements should be used to mark any bulleted and numbered lists.

<ul> and <li> elements should be used for bulleted lists.
<ol> and <li> elements should be used for numbered lists.

Example #1 - unordered (bulleted) list:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

will be displayed as

  • Item 1
  • Item 2
  • Item 3

Example #2 - ordered (numbered) list:

<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

will be displayed as

  1. Item 1
  2. Item 2
  3. Item 3

Special HTML Elements

Blockquotes

The <blockquote> element is used only to provide text which represents a long quotation.

The <blockquote> element must not be used to create indents for content which is not a quotation, or to "indent" any other text- or non-text elements of a Web page.

Inline elements

The <em> and <strong> elements can be used to provide italic and bold emphasis, respectively.

Examples:

<p>This service is for <em>CI students only.</em></p>

will display

This service is for CI students only.

Examples:

<p>The deadline is <strong>January 2nd</strong> at 4pm.</p>

will display

The deadline is January 2nd at 4pm.

Acronyms and abbreviations

Both acronyms and abbreviations should be specified using the <abbr> element. The definition for the abbreviation or acronym must be added to the title attribute.

Example:

<abbr title="Channel Islands">CI</abbr>
<abbr title="Osher Lifelong Learning Institute">OLLI</abbr>

Deprecated elements

The <font> element should not be used in any Web pages. Font formatting should be applied using Cascading Style Sheets (CSS).

Character entities

HTML entities must be used to represent special characters within tag and attribute values within a Web page. This includes page body text, page <titles>, and link URLs.
Either the Entity Number or Entity Name can be used to embed these characters within the HTML code.

Common HTML entities

Character Entity Number Entity Name Description
" " " quotation mark
' ' ' apostrophe
& & & ampersand
< < < less-than
> > > greater-than
( ) empty space     non-breaking space

View a more complete list of HTML entities

©