HTML versions

Three levels of HTML 4.0 operation

• Write clearly but be brief
• Organize the pages for quick scanning
• Use headings to summarize titles
• Use lists
• Don't forget link menus (List is quick scan and also good navigational tool)
• Don't bury important information in a lot of text.
• Short, clear paragraphs
• Make each page stand on its own
• Use descriptive titles
• Provide a navigational link
• Do not split topics/explanations over several pages
• Use emphasis sparingly
• Too much bold, italics, or ALL CAPS can be difficult to read
• Do not overuse color
• Limit animation and pictures to what is necessary
• Make link text single words or a short phrase
• No l33t (technical jargon)
• "Click here" - may be using mouse-less system. Also, avoid "here" syndrome
• "To save this page,..." - Viewer may have different browser and need different methods
• "Use back button to"... - Viewer may have different browser/system
• Spellcheck and proofread your pages carefully
• Keep the design of each page as simple as possible
• Use headings as headings; as a signal of new topic and not as a means to add emphasis
• Group related information visually
• Use a consistent Layout
• Consistent page elements
• Consistent forms of navigation
• External style sheets can enforce uniformity
• Do not make assumptions about visitor's hardware/software
• Screen/browser dimensions may be different
• Color capabilities may differ
• Preserve good contrast between background/text/links
• Color contrast sufficient to be readable
• Increasing font size of text can offset low-contrast background
• Make sure background images do not interfere with text
• Whenever possible, provide a link to home page
• If an e-commerce site, provide images of products as possible
• Design for experience level of your customer
• Provide an adequate explanation of the navigation system of the site (Site maps very useful)
• Whenever possible, check Web pages in as many types of browsers as possible. Pages cab have drastic differences in appearance according to what software is used.
  • Amaya (X) (Open Source) http://www.w3.org/Amaya/
  • Emacs-W3 (New update in works) http://www.cs.indiana.edu/elisp/w3/docs.html
  • Internet Explorer http://www.microsoft.com/windows/ie/default.htm
  • Lynx (UNIX and DOS; non-graphical browser) http://lynx.browser.org
  • Mozilla (Firefox; free download) http://www.mozilla.org
  • Netscape (X, Windows, Macintosh; free download) Download Page http://home.netscape.com/computing/download/index.html
  • Opera (free download) http://www.operasoftware.com

• Use descriptive text with the tag - if necessary give explanation and not just name of page/site
• Use links inside paragraphs sparingly. Can be difficult to read and visually sort out.
• Avoid the "here" syndrome. No "click here" or "Select this link". Write the text first, and then pick what portion of the text is best suited as the link.
• Make each link count. Is it necessary to the site? Does it impede the flow of information?

• Don't overuse images.
• Each image used is one more file that must be loaded, which takes time and bandwidth.
• Too many images on a page can be confusing and distracting
• Provide alternatives to images where possible - not all browsers support graphics
• Keep images small - in presentation and file size
• A page should load at 3-4 KB per second with 56Kbps modem. For an entire page to load in 20 seconds, page and associated files can not exceed 80KB
• For larger images, create thumbnails
• Save images as both GIF and JPG and compare which is smaller
• The fewer colors in a GIF file, the smaller the file
• Crop (remove unnecessary elements) or scale (shrink) the physical size of the image
• Crop/scale an image to smaller size, then use the height/width attributes to expand it as needed on the page

Information useful to include:
• Contact information of creator/person responsible for page
• Status of page -completed, work in progress, 2nd of 6
• Date last revised
• Copyright/trademark information
• URL so easily available if printed
• Link to mailto: URL

Editor list (for those not wanting to surf Yahoo)
• HotDog (Windows) http://www.sausage.com
• HoTMetal Pro (Windows, Macintosh, UNIX) http://www.sq.com
• HTML Assistant Pro (Windows) http://www.brooknorth.com/download/
• HTML Transit http://www.infoaccess.com
• 1st Page http://www.evrsoft.com/download/
• Macromedia Dreamweaver http://www.macromedia.com/software/dreamweaver/
• Adobe GoLive http://www.adobe.com/products/golive/main.html
• Microsoft Frontpage (Windows, Macintosh) http://www.microsoft.com/frontpage/

One should place a DOCTYPE declaration as the very first thing in an HTML document. For example:

      <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
      <html>
        <head>

          <title>Title</title>
        </head>

        <body>
          <!-- ... body of document ... -->
        </body>

      </html>
    

For XML documents, you may also wish to include an "XML Declaration" even before the DOCTYPE Declaration, but this is not well supported in older browsers. More information about this can be found in the XHTML 1.0 Recommendation.

The W3C QA Activity maintains a List of Valid Doctypes that you can choose from, and the WDG maintains a document on "Choosing a DOCTYPE".