Welcome to DukeHealth.org.
Skip over navigation

Quick Links

Home > About Duke Medicine > About DukeHealth.org > Web Standards > Web Development Standards

A A A Text:

Print E-mail Share

About DukeHealth.org

Web Development Standards

Document History

Feb. 8, 2010

Review and updates

Mar. 15, 2009

Review and updates

June 30, 2005

Document creation

1 Browsers

At a minimum, sites should display correctly in:

Internet Explorer 7
Internet Explorer 8
Mozilla Firefox 3
Safari 3

Sites will be styled using well-structured XHTML and CSS, allowing older browsers to degrade gracefully.

2 Content

Users expect certain content to exist when visiting a Web site. Below are some of these common elements that should exist to meet those needs

2.1 Contact Us

All Web sites should offer a means to contact the staff in charge of the site. A link to the contact information should appear on every page, in a consistent location (typically in the footer).

2.2 Copyrights

A copyright should be displayed in the footer of every page. The proper format for a copyright is:

Copyright ©
    2004-2010 Duke University Health System

The XHTML markup for this is:

Copyright &copy;
    2004-2010 Duke University Health System

The copyright symbol should be preceded by the actual word "Copyright", and followed by the year the site was first published, followed by the organization name, which is "Duke University Health System." Optionally, the publication year can display a time span representing when the site was launched up until when it was last modified (e.g. 2004-2010).

2.3 Site Map

Nontrivial (more than a dozen pages) sites should have a site map. The site map should show at least the top level content, and may go as deep as necessary as long as the resultant page does not become unwieldy (e.g. if a 4 level site map results in 300K of HTML, then back off a level).

Nodes that represent Web pages should hyperlink to the actual pages. Site maps ideally are generated dynamically by the back-end system used, as maintaining them can be burdensome.

3 XHTML

Web sites should be authored using XHTML 1.0 Transitional. As the Web is slowly moving towards XML, XHTML offers a good intermediate solution to ensure future compatibility, and greater accessibility due to its well-defined rules.

When complete, sites must fully validate against this standard. To check this use an automated validator, such as the one at the W3C Web site:

http://validator.w3.org/

Below are some XHTML guidelines covering the key rules and practices that lead to well-formed documents.

3.1 Doctype Declaration

XHTML documents must begin with a line declaring the appropriate document specification. The specific doctype to use is XHTML 1.0 Transitional. See below for an example doctype declaration for this specification:

<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

This declaration is needed at the top of every Web page, and should be the first line of text in the source code. Note that some Web sites have XHTML pages that begin with a standard XML document start (<?xml>), but do not do this, as it causes problems in many Web browsers.

3.2 XML Name Space Declaration

The second line of code must be the HTML tag specifying the proper namespace. The HTML tag should always look like the following, for English language sites:

<html
    xmlns="http://www.w3.org/1999/xhtml" lang="en"
    xml:lang="en">

3.3 Character Sets and Content Type

Declare the appropriate content type and character encoding in the <head> section of the source. The preferred character encoding, for flexibility and compatibility, is UTF-8. Content type will be text/html, in general. Below is how this meta tag* should appear:

<meta http-equiv="Content-Type"
    content="text/html; charset=utf-8" />

*NOTE: Merely setting this meta tag does not ensure that Web pages will be served in the UTF-8 encoding. The actual content must be input in this encoding, and the Web server must be appropriately configured.

3.4 Tags in Lower-case

XML is case-sensitive, and all XHTML tags must be in lower-case. So, instead of:

<HEAD>

       <TITLE>Family Brothers
    Pizza</TITLE>

    </HEAD>

...write instead:

<head>

       <title>Family Brothers
    Pizza</title>

    </head>

3.5 Tags Closed

In HTML, some tags do not require a matching close tag, for instance <p>. In XHTML, all tags that open must have a matching close tag. So, instead of:

<p>This
    paragraph has no closing tag.

    <p>And neither does this one.

...write instead:

<p>This paragraph does have
    a closing tag.</p>

    <p>Well formatted XHTML is the way to
    go.</p>

3.6 Empty Tags Closed

Empty tags also must be closed. Common empty tags include <br> and <img>. To close an empty tag, insert a space and forward slash / before the closing angle bracket. The space in front of the slash is required so that older browsers will handle this formatting correctly. So, instead of:

<img src="wingchun.gif"> <br>

...write instead:

<img src="wingchun.gif" />
    <br />

3.7 Attributes Quoted

All attribute values must be quoted, using the standard double-quote (not the single-quote). So, instead of:

<img src=taichi.gif width=22>

...write instead (note the tag closing slash, as well):

<img src="taichi.gif" width="22"
    />

3.8 Special Characters

Do not cut and paste special characters directly into HTML documents. Special characters are any characters than you can't naturally find on an EN English (United States) keyboard (i18n issues are another matter). Special characters include the copyright symbol, trademark symbol, em dash, en dash, and others.

Special characters can be represented in HTML using either the character entity reference (a name-based code), or the decimal character reference (a number-based code). For example, the entity reference for the trademark sign ™ is:

™

while the decimal character reference is:

™

3.8.1 When to use the Entity Reference

Always use the entity reference to display any of the characters found in the tables found on the two pages, below.

3.8.2 When to use the Decimal Character Reference

At the time of this document's creation, many browsers do not support the entity references for a certain set of special characters. For this set of characters, always use the decimal character reference, instead. A table of these special characters, with their decimal references, can be found on the following Web page:

Special Entities (WDG)

3.9 Deprecated HTML Tags and Attributes

Do not use any of the deprecated tags. This includes:

<applet> <basefont>
    <center> <dir> <font> <isindex>
    <menu> <s> <strike> <u>

Avoid using any of the following deprecated attributes (all of which can be replaced by style-sheet controls):

Attribute	When used within:
align	<caption>,<img>,<table>,<td>,<th>,<hr>, <div>,<h1..6>,<p>
alink	<body>
background	<body>
bgcolor	<body>,<table>,<tr>,<td>,<th>
clear	<br>
compact	<ol>,<ul>
border	<img>,<object>
hspace	<img>,<object>
link	<body>
noshade	<hr>
nowrap	<td>,<th>
size	<hr>
text	<body>
type	<li>
valign	<img>,<table>,<td>,<th>,<hr>,<div>, <h1..6>,<p>
value	<li>
vlink	<body>
width	<hr>,<pre>,<td>,<th>
vspace	<img>,<object>

Additionally, do not use these tags at any time:

<blink> <marquee> <big>
    <small>

4 Accessibility

For a site to effectively reach as many visitors as possible, there are accessibility guidelines that should be considered to account for the variety of Web browsers. Here are some resources to help in the development of accessible Web sites:

http://www.w3.org/WAI/
The W3C's Web site for guidelines, tips, techniques, and the different levels of compliance.
http://diveintoaccessibility.org/
Dive Into Accessibility offers a set of very detailed tips for making a more accessible Web site in 30 days.

There are also online validators for accessibility, and sites must pass the Section 508 compliance using the Cynthia Says™ portal, using the URL, below:

http://www.contentquality.com/
The Cynthia Says Portal is a Web content accessibility validation solution, which can help identify Section 508 and WCAG guideline violations.

In addition, to meet the minimum accessibility standards, Duke Medicine Web sites should comply with the rules outlined below.

4.1 Provide text equivalents for all non-text content

Primarily, this implies that all <img> tags should specify a value for the alt and title attributes. The title value should be a name for the image, while the alt value should describe the image. As an example, an image of a boy eating a pizza may have the following <img> tag:

<img src="sam_pizza.jpg" width="300"
    height="124" title="Samuel Richaldson" alt="boy eating a pizza"
    />

For images that are used as layout elements, like lines, spacers, etc., no title is required, and the alt value should be set to the empty string, like so:

<img
    src="spacer.gif" width="1" height="1" alt="" />

4.2 CSS

Use CSS for all text styling. I.e., do not use the <font> tag or the style attribute.

4.3 Avoid using color to convey meaning

As some readers have different perceptions of color, using color to convey meaning is not always effective. For instance, here is an example of what not to do. (In the following example, the 'A' link is violet, the 'B' link is red, and the 'C' link is green.)

Click on the red link to visit our
    office: A B C

4.4 Multimedia

4.4.1 Provide alternate content for elements requiring a plug-in

When non-native media types are embedded in pages, like Flash or QuickTime, specify an alternate content source that can be displayed by browsers that do not have the plug-in installed.

For Flash movies, use the following as an example to embed multimedia on Web pages. Note that this code snippet is not the standard HTML seen when using Flash, but is instead based on the 'Flash Satay' style of coding. For more details on this style, and why it is a good solution, see this article:
Flash Satay

<object id="flash_ad"
    type="application/x-shockwave-flash" width="245" height="490"
    data="flash_ad.swf">

       <param name="movie" value="flash_ad.swf"
    />

       <param name="wmode" value="opaque" />

       <param name="allowScriptAccess"
    value="sameDomain" />

       <!-- alternate content for non-flash visitors
    -->

       <div>

         <ul>

           <li><a
    href="foo">Foo</a></li>

           <li><a
    href="bar">Bar</a></li>

           <li><a
    href="sassafras">Sassafras</a></li>

         </ul>

         <p style="padding-top:
    2em;">

           <u>Note:</u>
    There is multimedia content on this page which requires the
    Flash viewer.

           To see it, download and
    install the Flash plugin here: <br />

           <a
    href="http://www.macromedia.com/go/getflashplayer">Macromedia
    Flash Player</a>

         </p>

       </div>

    </object>

4.4.2 Animated Images

Animation usage should be minimized, in general. When it is used, the animation should not loop more than twice. GIFs are a good choice when creating small animations, but Flash is more efficient for larger components.

4.4.3 Sounds

Use of sounds should be minimized. If used, ensure that the volume is at a low level, and that the sounds are not harsh or grating. Like color usage, sound should not be used to convey meaning.

4.4.4 Music

Music should only be played in response to a user action, like playing a video or a song. Music or sounds should not auto-play when loading a Web page.

4.5 Links With Titles

When a link's enclosed text is not very descriptive for the destination Web page, a title should be specified. A common case is when the word "here" is linked. Here is an example of using the title attribute effectively:

For more
    information, go <a href="/library" title="Health
    Library">here</a>.

If the enclosed text is descriptive, this is not needed. For instance:

For more information, visit the <a
    href="/library">Health Library</a>.

4.6 Image Tags Need Dimensions

Image tags should specify the width and height. This will ensure that page layout is correct and stable even should the image fail to load. For example:

<img
    src="twobyfour.jpg" width="2" height="4" />

4.7 Forms

Ensure that form elements tab logically. Form input elements should also have their labels (when present) explicitly associated. For example, instead of this:

Username:
    <input type="text" />

...write instead:

<label
    for="username">Username:</label>

    <input id="username" type="text" />

4.8 Tables

Do not use tables for layout purposes. Only when a table of data truly needs to represented on a Web page is an HTML table appropriate.

4.9 Frames

Do not use frames. Use of frames causes accessibility problems, and should be avoided. This includes iframes.

4.10 Links

Avoid using the "target" attribute on <a href="123"> tags. Opening links in new windows can be frustrating for users, who have become accustomed to using the back button to quickly navigate out of content. Attempts to trap users on your site will typically have a negative, rather than positive, effect on your site's success.

5 CSS

Sites must use valid CSS. As with XHTML, this can be checked using an automated validator, such as the one at the W3C (World Wide Web Consortium) Web site:

http://jigsaw.w3.org/css-validator/

As mentioned above, usage of the table tag for layout is discouraged, and CSS offers an alternative that has many benefits, of which the most important is the separation of presentation from content. A completely CSS style site can be redesigned by simply modifying the style sheet.

5.1 Best Practices

The following are good rules to follow when creating a style sheet:

use ems or percentages rather than pixels for sizing fonts, padding, and margins
set both body margins and padding
set body font-family and font-size
set form margins and padding to zero
set text, background, and link colors
establish a link roll-over style
set image borders, margins, padding
set font-size for the headers (h1, h2, and h3, at least)
use pseudo-classes to control recurring border and spacing styles
set font sizes using relative measurements

5.2 CSS Resources

Here are some excellent resources for CSS development:

Complete CSS Guide
http://www.westciv.com/style_master/academy/css_tutorial/
John Allsopp's online tutorial
Practical CSS Layout
http://www.alistapart.com/articles/practicalcss/
A guide from A List Apart that discusses using CSS as an alternative to table-based layout

About This Page

Published: Mar. 17, 2006
Updated: June 24, 2008
URL: http://www.dukehealth.org/about_duke/about_website/standards/web_dev_standards