1. DO Learn Basic HTML (HyperText Mark-up Language)
There's no such thing as WYSIWYG (What You See Is What You Get) in HTML. Every browser interprets HTML in a slightly different or outdated fashion. Many users of HTML assistants or editors are stunned when they find out their web pages appear different or even garbled when viewed by a different browser.
2. Design for the user!
Designing for the user means that the pages you design will be accessible and easily navigated by the user. When users look at your page they will develop the use model of your page from what they see. If you did your job well, they will be able to navigate and locate the information they desire with ease.
3. Validate your HTML
How to validate - We suggest using the following site:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd " >
4. Check your pages in as many browsers as possible
At a minimum, check with MSIE, Netscape, Firefox, and Lynx (a non-graphical browser and useful for simulating what a person having a web page read to them with text-reading software would "see").
To check with Lynx from the web, go to - lynx me  at: ugweb.cs.ualberta.ca/~gerald/lynx-me.cgi
5. Know the <IMG> tag
Always use ALT
Use WIDTH and HEIGHT
How the tag would look - <IMG SRC="library.gif"ALT="Library" WIDTH="300" HEIGHT="200">
Avoid "Coming Soon" and "Under Construction" signs
When something is "published" for the web it isn't static. It can be changed any time to add or update information. This is the power of the web. Indicating that things may change is only stating the obvious. On the other hand, when you put pages up they should be correct, with all links working. Anything less is like printing a book with pages missing, the user is not getting what you have promised. If you do use "Coming Soon," make sure to include a date.
Click here - assumes that everyone is using a mouse with their browser.
Don't use Header tags to change font size
This confuses adaptive technology and indexing software.
Headers - <H1>text</H1> through <H6>text</H6> should be used in order - not <H1> then <H4> then <H2>. Again, it confuses other software that uses your page.
If you want to control font size, use the font size=n tag - with n being 1 through 7 - 1 = smallest and 7 = largest and 3 = the base size. They aren't seen by some other browsers, but it doesn't hurt them.
<FONT SIZE=5>Infopeople</FONT> =Infopeople.
<FONT SIZE=2>Infopeople</FONT> = Infopeople.
You can also use the size tags <BIG> & <SMALL>. These are now used by Netscape 2.0 and up and will be the standard as newer versions of browsers implement them.
<BIG>Infopeople</BIG> = Infopeople. This is cumulative, so
<BIG><BIG>Infopeople</BIG></BIG> = Infopeople
<SMALL>Infopeople</SMALL> = Infopeople. This is cumulative, so
<SMALL><SMALL>Infopeople</SMALL></SMALL> = Infopeople
Physical character highlighting
Use the tags:
<B></B> for bold and
<I></I> for italic.
In certain contexts, use of <P> should be avoided, such as directly before any other element which already implies a paragraph break.
To wit, the <P> element should not be placed before <H1>, etc., HR, ADDRESS, BLOCKQUOTE, or PRE elements.
It should also not be placed before or after a list element.
That is, a <P> should not be used to mark the end-of-text for <LI>, <DT> or <DD>. These elements already imply paragraph breaks.
While it is true that all of the entities mentioned above imply a paragraph break, this only occasionally means that they also imply white space between sections -- this depends on the browser. So, an alternative is to use the <BR> tag. In Netscape multiple instances of <BR> will create multiple line spaces.
Don't use the Netscapism <CENTER> tag
Use <P ALIGN=CENTER> </P>, <H1 ALIGN=CENTER> </H1>, etc. rather than <CENTER> </CENTER>
We recommend surrounding a table with <DIV ALIGN=CENTER> </DIV>
Directory Reference Errors
It is possible to request an index of a directory from an HTTP server. The typical response from the server is to either return a pre-generated index document (which is often the document "index.html" in the referenced directory), or to construct an HTML document on the fly which contains a listing of all files in the directory. However, when making such a directory reference, it is important to make sure to have a trailing slash on the URL. That is, if you were to request the index of Infopeople's directory of HTML documentation, you would want to refer to it as
infopeople.org (missing the end )
Many servers are able to catch these errors, and provide redirection to the proper URL, but it's best to get the URL right in the first place -- notably because not all browsers support transparent redirection. Also, getting this correct the first time means it will take less time for the page to be loaded; your readers won't have to wait through the time needed to open two (or more) HTTP connections.
Missing quotes in start tags
This reference to the Cerritos Public Library Home Page should look like:
but people composing "raw" HTML from a text editor will often instead type:
<A HREF="library.ci.cerritos.ca.us/> (missing the end ")
The behavior of browsers upon encountering this varies -- some display a proper link, but you can't follow it, while others actually eat up huge portions of the following text, thinking everything up until the next quotation mark to be part of the URL.
Missed end tags
Many of the HTML elements contain information within them. For example, <EM>emphasized text</EM> would be rendered as emphasized text. There is a start tag (<EM>), some content (which may include text, and in some cases, other nested elements), and an end tag (</EM>, indicated by the /). A common mistake is to miss the / in the end tag.