cookiecrook²

Skip to content

This document is a revision and addition to the HTML & WEB DESIGN section of an employee coding standards document released by Database City. Revisions were made by James Craig throughout 2000 and 2001. Please feel free to report any errors you my find.

TABLE OF CONTENTS

HTML Tags

As some of you have already heard, XHTML is an XML-based application that will likely replace HTML in the near future. In order to prepare for this, the following guidelines should be followed:

  • HTML tags and attributes should be lower case (with the exception of JavaScript Event Handlers)
  • Attribute values should be quoted and lower case (with the exception of JavaScript variables and functions)
  • Elements must nest, not overlap (<span><p>text</p></span>, not <span><p>text</span></p>)
  • All non-empty elements must be terminated (e.g., <p>Text</p>)
    Tags that people typically forget to terminate include:
    • <p>...</p>
    • <li>...</li>
    • <option>...</option>
  • Empty tags must be terminated (<br />, not <br>)
    Empty tags that people typically forget to terminate include:
    • <br />
    • <img />
    • <input />
    • <link />
  • Empty attributes must now contain a value (<td nowrap="nowrap">, not <td nowrap>)
    Empty attributes that people typically forget to terminate include:
    • <td nowrap="nowrap">
    • <input checked="checked" />
    • <option selected="selected">
    • <frame noresize="noresize">

Designers using a WYSIWYG HTML editor should ensure that the software is configured to follow these specifications.

Reserved Characters

Certain characters are reserved for document markup. These characters are Less Than(<), Greater Than (>), and Ampersand (&). When using these for display, one should always use their HTML equivalent entities. This also applies to alt attributes and any other display elements.

Reserved entity values:

< = &lt;
> = &gt;
& = &amp;

For Example:

<img alt="Black&White" /> should now be written as <img alt="Black&amp;White" />

Indenting

Indent with [TAB]s, not [SPACE]s. Tabs take less file size, and some people prefer to see tabs at different widths.

If using a WYSIWYG editor, turn off hard return word-wrapping.

Tables should be indented like this:

<table>
  <tr>
    <td>
    </td>
  </tr>
</table>

Nested tables should follow the same guidelines:

<table>
  <tr>
    <td>
      <table>
        <tr>
          <td>
          </td>
        </tr>
      </table>
      <table>
        <tr>
          <td>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Table Data content should be indented like this:

<td>
  Content
</td>

UNLESS this alignment adversely affects web page appearance, or the content is short. In either of these cases, format table data content inline:
<td>content</td>

Use Alt Attribute In Image Tags

All bona fide images (not shims or spacers) should include a value for the Alt attribute. Pixel shims and spacers should include an empty alt attribute.
<img src="spcr.gif" alt="" />

Use Trailing Slashes in Directory URLs

Use a trailing slash (/) in URLs that point to directories. If you omit the trailing slash, the browser will make a request to the server, only to be told that it's asking for a directory. The browser will then make a second request with the slash appended to the URL, and only then will the server respond with the default document for that directory, or a directory listing if there is no default document and directory browsing has been enabled. Appending the slash cuts out the first, futile round trip. For user-friendliness, you may want to omit the trailing slash in display names.

For example:

<a href="http://www.foo.com/">http://www.foo.com</a>

Deprecated, Obsolete, and Browser-Specific Tags

Deprecated Tags

Deprecated tags and attributes are those that have been replaced by other, newer, HTML constructs. Deprecated tags are still included in the HTML draft or recommendation but are clearly marked as deprecated. The draft "strongly urges" the nonuse of deprecated tags. This does not mean you must immediately update all your documents.

If your intended audience is using version 4.X or above browsers, you should use Style Sheets, and avoid using deprecated tags in your new documents. If a significant portion of your audience is using an older browser, use the deprecated tags.

All desired attributes for the <body> element should be implemented using Style.

<isindex></isindex> should be replaced by an <input /> form element.

<applet></applet> has been replaced by the more encompassing <object></object> tag.

<center></center> is deprecated in favor of tag with the align attribute set to "center" such as <div align="center">.

Replace all these tags with corresponding CSS:

<font></font>
<basefont></basefont>
<strike></strike> and <s></s>
<u></u>
<b></b>
<i></i>

Use a <ul></ul> list instead of these:

<dir></dir>
<menu></menu>

Obsolete Tags

Obsolete tags have been removed from the HTML specification. While browsers may still support obsolete tags, there is no guarantee that this support will continue. You should try to update existing documents and remove obsolete elements quickly.

The three tags that become obsolete in HTML 4.0 are:

<xmp></xmp>
<plaintext></plaintext>
<listing></listing>

In all cases, replace these tags with <pre></pre> or <code></code>.

Browser-Specific Tags and Attributes

Never use "browser-specific HTML tags. These are tags that were invented by programmers at either Microsoft of Netscape and have never been supported by the W3C. Some DHTML requires browser-specific JavaScript but you should never have to use browser-specific HTML tags

Browser-specific tags include the <layer> and <ilayer> tags.

Browser-specific attributes include the bordercolor, bordercolorlight, and bordercolordark attributes of the <table> tag.

Cascading Style Sheets (CSS)

The use of Cascading Style Sheets (CSS) can simplify development and site maintenance by separating content from presentation. However, as with other client-side technologies, browsers vary widely in their support for CSS, so test thoroughly prior to release. In situations where a single browser will be employed (e.g., intranet applications), CSS may be used extensively.

A major benefit of CSS is that a single style sheet can be used throughout an entire site by placing a <link /> tag in the head of each document:

<link rel="stylesheet" type="text/css" href="includes/style.css" />

If CSS is contained within an HTML document, it should always be commented to avoid problems with older browsers.

<style type="text/css">
<!--
div {padding:3px;}
-->
</style>

Format Cascading Style Sheets this way:

a {text-decoration:none; font-weight:bold; color:#612c96;}
p {font-family:arial,helvetica,sans-serif;}
p.subtitle {color:#612c96; font-weight:bold;}
div.section {margin-left:0.25in;}

Or this way:

body {
  color:#612c96;
  margin-left:0.25in;
  font-weight:bold;
  text-decoration:none;
  }

For multiple tags with the same attribute:

h1, h2, h3 {color:#612c96;}

JavaScript

When possible, JavaScript, should be contained in a seperate file. Use the src attribute to call on external scripts.

<script type="text/javascript" src="/includes/script.js"></script>

If JavaScript is contained within an HTML document, it should always be commented to avoid problems with older browsers. The closing HTML comment --> should be preceded by a JavaScript line comment //

<script type="text/javascript">
<!--

var x = 2;

function test() {
  alert('This is a Test');
}

//-->
</script>

CDATA Tags Instead of HTML Comments

In some XML parsing applications, the contents of HTML comment tags <!-- --> can be removed completely before sending a document to a client. For this reason, the <![CDATA[ ]]> tag was instated. It is essential however, that this tag only be used in conjunction with a server-side XML parser because web browsers will return a JavaScript syntax error when encountering the CDATA tag in a static document. The CDATA comments should be formatted:

<script type="text/javascript">
<![CDATA[

var x = 2;

function test() {
  alert('This is a Test');
}

]]>
</script>

Photo by James Craig.