CS177 Fall 2006 HTML Coding Standards

Purpose

The purpose of this document is twofold:

Introduce you to standards that are typical of professional, real world programming.
Help you develop good code formatting habits. This is indispensable for solving large problems.

Good code formatting will represent the logical flow of the program more accurately thus improving readability of your code and allowing you to find errors quicker. Note the differences between the following two simple examples, although both will produce the same web page, one is much more readable than the other:

Bad Formatting	Better Formatting
`<html><HEAD><title>really bad page</TITLE></head><body><p>I can't read anything here</p></body></HTML>`	`<html> <head> <title>a little better</title> </head> <body> <p>Wow, that made a HUGE difference</p> </body> </html>`

Specification

First and foremost, we shall adhere to the specifications for HTML 4.01 established by the W3C HTML 4.01 specification

Case

Although web browsers are case insensitive (ex: <Title> = <TITLE> = <TiTlE> = <title>), all pages written for this class shall only use lower case for tag names (ex: <title>, <body>, etc.).

Opening and Closed tags

All items should be enclosed in a pair of opening and closing tags. Another way of saying this is: every open tag should have a closing tag. Although a browser might show the content correctly if there aren't closing tags, this is not always the case. Exceptions include:

Whitespace

Whitespace is a great way to clean up the formatting of your code. The following rules apply:

All nested tags will be on a separate line from its parent.

All nested tags will be indented (can also use 2 spaces) to the right of its parent.
Example:

Wrong	Also Wrong
`<ul><li>this is a list item</li><li>here is another one</li></ul>`	`<ul> <li>this is a list item</li><li>here is another one</li> </ul>`
Also Wrong	Right!
`<ul> <li>this is a list item</li> <li>here is another one</li> </ul>`	`<ul> <li>this is a list item</li> <li>here is another one</li> </ul>`

All closing tags should be lined up (i.e. have the same indentation) with the tags they close.
Example:

Wrong	Also Wrong
`<ul> <li>this is a list item</li> <li>here is another one</li> </ul>`	`<ul> <li>this is a list item</li> <li>here is another one</li> </ul>`
Also Wrong	Right!
`<ul> <li>this is a list item</li> <li>here is another one</li> </ul>`	`<ul> <li>this is a list item</li> <li>here is another one</li> </ul>`

Comments

You should place comments at the top of every web page with your name, date, and section number.
Example:


Additional Information

For additional information of what correct HTML formatting is, see the source of this document by clicking on "View" -> "Page Source" in a Firefox web browser.