HTML Coding Practices

To make all of our pages easier to maintain by multiple people, we follow the following rules:

Banned Practices

Do not capitalize your tags anymore - we are beginning to transition into XHTML, and doing so requires all tags to be in lowercase.
Do not use the "align" attribute anymore. Use class="right" or class="center". They should be primarily used for images, table cells, and paragraph tags. In general, though, let the style sheet align things for you. i.e. don't center headers if the header style doesn't.
Never use <center>, it has been replaced by other methods
- If you want to center something, use class="center" in the tag. Headers and table data and header cells should be left to be formatted by CSS.
Never use , BGCOLOR, or BACKGROUND. They have been replaced by CSS formatting.
Never use the tag as this could be confused with a hyperlink. See Online Style Guide for alternatives.
Never use <blink> or <marquee>, they are not handicap accessible and they're just plain tacky. =^)

Always use header tags in order. On new templates, the title of the page is generated as an h1, any other section headers should start with h2 then h3 and so on.
If there is a header for a section, use the appropriate header tags. Do not try to emulate the look by using title
See WPI Style Sheets to learn more about formatting different types of headers.

Always use height, width, and alt attributes for every img tag. if the image does not contain text, use alt=""
When using the height and width attributes, only use the actual height and width of the image. Do not resize images using these attributes. If you wish to have a thumbnail of a photo on a page, generate it as a separate image. This will significantly improve load time.
Standard photo sizes on the WPI web site are 200x300, 300x200, 150x100, and 100x150 pixels.
See WPI Style Sheets to learn how to properly wrap text around photos, add captions, etc.

Always use /p, /li, /td, and /tr tags
Always user lowercase letters for tags and their attributes.
Always put attributes in quotations. (e.g., href="blah.html")
Do not nest container elements, such as p, table, h# ul, li, or ol. Examples:
- Do not put p or h# tags inside an li.
- Do not put p tags around a ul or blockquote.
- Do not put p tags around a table.
Always nest open and close inline tags. i.e. <a></a> not <a></a>
Many times if you copy text out of a Word document, etc, there are non-ASCII characters that need to be converted. Common ones are curly or smart single and double quotes, characters with accent marks, special symbols, or extra long dashes. IE recognizes many of these, but older browsers do not, and strange characters will appear in their place. Curly quotes should be converted to straight quotes, and other characters should be changed to their HTML or HEX entities.
Greater and less than signs should always be converted to their HTML entities > and <
Use a W3C Validator Favelet to quickly and easily check your code on every page.

When referencing pages on the WPI server, never use "http://www.wpi.edu/" unless you are referencing a page on the WPI server from a virtual host (e.g., www.mgt.wpi.edu). Instead, start with the root directory of the web server and create absolute links from there:
<a href="/">WPI Homepage</a> <a href="/Academics/Depts/Chemistry/">Chemistry & Biochemistry</a>
Reference a page one or two directory levels up like so:
<a href="./">current directory index.html</a> <a href="../">previous directory index.html</a> <a href="../../">two previous directories index.html</a>

Always use a capital letter to start the name of a directory. Acronyms used for directory names should be in all caps.
Never use a capital letter in a filename!
Do not use underscores (_) or spaces in file or directory names. They cause problems with some browsers.
Try to keep directory and filenames short while maintaining their uniqueness.

Maintained by webmaster@wpi.edu
Last modified: Aug 31, 2004, 16:33 EDT