Best Practices

This page describes some best practices in site and page development. This information will not only keep the pages consistent across the various sites, but will also insure well-formed XHTML and browser consistency.

Page structure

Do NOT use tables to control page structure
Tables are so 1990, use <div>s and style sheets to control page structure. Save the <table> tag for tabular data.
Avoid using frames
Do not use the <frame>, <frameset>, <noframes> tags, they confuse site navigation, do not allow you to bookmark site pages, and do not play well with search engines.
Centering objects and text

Use style sheets to center text and blocks instead of using the deprecated align attribute. To center paragraph text and an image block, use the following CSS:


p#booktitle {
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
}
p.bookimage {
    width: 50px;
    margin: 0 auto;
}

Using the classes in your page then looks like:


<p id="booktitle">Moby Dick</p>

<p class="bookimage"><img src="mobydick.jpg" width="50" height="50" alt="Moby Dick" /></p>

Using auto for the left and right margins along with a width specification will center a block in all modern browsers:

Moby Dick

Moby Dick

Text

Use line-height for a more readable page
The line-height property sets the distance between the baseline of adjacent text. The Research default is 1.8, where a value of 1.0 provides no spacing. It's best to use a unitless number, which scales from the current font size.
Enter text sans style
Enter text without style, using plain text and capitalizing when necessary. If you want ALL CAPS, use the text-transform: uppercase; on the text All Caps or on all caps.
Use the <q> tag for inline quotes
Use the quote tag when you use double quotes within a text block. These will be replaced by curly quotes by the stylesheet.
Avoid presentational elements

These include the <b>, <i>, and others. Refer to these alternatives:

  • <b> use font-weight: bold;
  • <i> use font-style: italic;
  • <u> use text-decoration: underline;
  • <s> use text-decoration: line-through;
Do not use the <font> tag
This tag is long gone form the standards, use style sheet properties instead.
Avoid using line breaks and horizontal rules
While not deprecated, the <br /> and <hr /> tags add presentation to your content, which should be avoided. Use margin or padding styles or the border style on an element to achieve the look you want.
Avoid using the target attribute in the <a> tag
Forcing a page to open in a new window is distracting and confusing for your user.
Use <abbr> and <acronym> for accessibility
Using the abbreviation and acronym tags help make your page more accessible.

Images

Avoid using images in place of text
Text in an image cannot be crawled by search engines. It's best to use text in the XHTML tag (paragraph or list item, etc.) and use a background image and text color to achieve the presentation you want.
Provide the width, height, and alt attributes
Standards require the width, height, and alt attributes for each <img>.

Using Styles

Separate content from style
This is rule number 1 in web development. Divorce style from content and make the XHTML tags reflect your content.
Avoid using the style attribute
The style attribute (i.e., <p style="margin-left: 2.5em";>) will soon be deprecated, so you should avoid using it. Sometimes it is necessary, but use it sparingly. Instead, use the style tag in the head section of the document, or use a style sheet.
Font sizes
For the screen media, set a font size as a percentage for the entire document (I use 76% which yields a 12-pixel size if your default browser size is 16px, which most are). If you use pixels, IE will not allow the user to resize the text. So, set a percentage on the <body>, then set individual styles using units of em. For example, p { font-size: 1em; }.
Do not over-class your document

Take advantage of descendant, child, and adjacent selectors, rather than assign a class to every bit you want styled. For example, for a staff entry you might have code that looks like this:


<div class="staff">

<p>John Smith</p>
<p>Curator</p>
<p>212-555-1212</p>
<p>jsmith at email.com</p>

</div>

If you want to style the text and paragraphs, you can use an adjacent selector (+) in your CSS, like so:


.staff p {
    font-size: 1.1em;
    font-weight: bold;
    line-height: 1.4;
    padding: 0;
    margin: 0;
}
.staff p + p {
    font-size: 0.9em;
    font-weight: normal;
}

Which results in the following:

John Smith

Curator

212-555-1212

jsmith at email.com