The Golden Rules for Good HTML

  1. Read the Golden Rules for Bad HTML to see how many traps you can fall into.

  2. Read a good HTML tutorial (see Resources page) and/or have a look at the FAQ and other messages in the help forum before asking a question.

  3. Respect your visitors. Imagine you were a supplier, and the visitor your customer: Don't demand, offer. What might a customer be looking for in your product, the webpage? What might turn them away? Would a car manufacturer be successful if they required customers to be at least 180cm tall, weigh not more than 60kg and are at least 50 years old? Or if the delivery time was half a year? Or if the car only functioned with safety belt unfastened? The rest of these rules more or less follows from this consideration.

  4. Remember that your page is only one among millions. If it is to attract attention, interesting content is not enough: When a page takes too long to load, is hard to read, understand and navigate, people will turn away. An interesting, well-designed page doesn't need any whistles and bells to impress people.

  5. Don't let a WYSIWYG editor do all the coding without checking what it did. Especially if the editor is made by a browser company, it's highly probable that you've been led to use features only that one browser (latest version, of course) can understand. Moreover, they often produce trash code that only slows down loading. Your best bet is a text-based editor where tags can be inserted using buttons and menu commands, but you see the inserted code - a good way to learn HTML.

  6. Make your images small (less than 20KB) to ensure fast loading. Browsers display only 256 colours, so reduce colour depth. Reduce the height and width dimensions and use compression to minimize the file size. (In case of JPG, a compression rate of 38-40 is the best compromise of quality and file size.) Animated GIFs basically consist of any number of single GIFs displayed one after another, so the file size is often huge.

    If it's essential that the image be of high quality, consider linking it normally (a href=xy.jpg), and tell users about the file size. Reducing the image display size using the "height" and "width" statements of the image tag does not increase loading speed.

  7. Make your page usable for people who don't load images because e.g. their internet connection is slow. This includes using the "height" and "width" statements so that the layout will be the same with or without images, the "alt" statement to tell users what they'd see if they did load the image (especially important if the image is also a link), and defining a background colour similar to that of the background image to ensure that text is still readable.

  8. Remember that there are tags that not all browsers understand. You don't really have to step down to the oldest Netscape version of all, but browser versions that are merely a year old are still frequently used. A good HTML tutorial will tell you which tag is supported by which browser (version).

  9. Be kind to your visitors' eyes: Don't use too garish colours. There should be as much contrast between text and background as possible. Background images that are part fair, part dark and use more than two different colours are unsuitable.

  10. Java Applets can take extremely long to load and should not be used for purely decorative effects. Security-aware people disable Java when surfing the web, so they won't see the applet anyway. Same goes for JavaScript, so don't use JavaScript for navigation. Test every page with Script on it before publishing it: JavaScript error popups are annoying and can crash browsers. No way that visitor ever comes back!

  11. Some people still have to make do with 14" screens and 1MB graphics boards. When making the layout, don't assume that the visitor's browser will be maximized. Large images, tables and frames can look awful when viewed in a small browser window.

  12. Use animations with care. Blinking text is very hard to read, and constant movement can be annyoing if the page is viewed for some time.

  13. Music that plays automatically can be likewise annoying to some people and slows down loading, especially if the music file is large. WAV files are usually huge - if you feel the need to offer them, make a normal link (a href=) and inform your visitors of the file size.

  14. Tables may be nice for formatting pages, but the content isn't shown until the whole table is loaded. The larger the table, the longer it takes. It is therefore not a good idea to put the whole page into one table. Use a number of small tables or, better yet, make do without them wherever possible.

  15. Do not overload your index page. It is your calling card, so all the rules for good HTML are especially important for it. A short summary of the contents of the site and clearly visible links to the other pages are ideal. Make people curious, but don't promise anything you can't keep.

  16. The larger a site gets (in terms of number of HTML files), the more attention should be paid to navigation. "Zig-zag" navigation that requires constant use of the "back" button is tiring and slow. Consider splitting the site into multiple areas and possibly sub-areas, creating a tree structure of navigation. Be careful, though, that the visitor doesn't get lost!
  17. And finally: Test your own pages. It's a good idea to create them offline because it's a) cheaper in case of a dialup connection, b) you'll always have a backup in case the webserver crashes, and c) you spare yourself the embarrassment of being caught with errors in public. ;)
    Ideally, you should test your once page with a browser version older than your own and once with the "auto load images" feature and JavaScript disabled. It doesn't have to look as beautiful, but it must still be readable and navigable.
    If you use subdirectories, create the same directory structure on your harddisk. Now if you use relative rather than absolute links (see Subdirectory Tutorial), you'll be able to surf the whole site offline before uploading it.

    Golden Rules for Bad HTML
    Golden Rules for Good HTML
    Hints for learning HTML


    This page was prepared by Yoshiwara

    This page hosted by  Geocities Get your own Free Home Page