Tips for writing good HTML documents


This is work in progress.

Formatting

Spell check your document (you can use ispell or spell in Unix).

View your HTML page to see how it looks. If there is weird indentation or missing or extra spaces, check your HTML to make sure you put in all your <P>'s and finished off all your lists with </UL>'s or whatever.

You can leave blank lines by using line breaks <BR> or preformatted text <PRE> </PRE> containing only blank space.

Titles and headers are different in HTML. Titles (unlike headers) should not depend on the context, since they can end up in something like a hotlist, where they are completely out of context. For example, the header for the introduction section of a document on chaos could just be Introduction, however the title should be Introduction to Chaos.

A very useful technique is to look at other people's HTML documents to figure out how various things are done. You can look at the HTML for any document under Mosaic by using the File pulldown and choosing the option View Source.


Hyperlinks

Test all your hyperlinks to check that they work. If they give an error, it may just be that the server is busy or down. If you can't click on the link, you are probably missing some quotation marks. In some cases you may get the wrong document, possibly because you missed out the closing anchor </A> for the previous hyperlink.

If you are linking to a file in your home directory, make sure the file is world readable.

Hyperlinks should be relative wherever possible.

Hyperlinks should be accessed from meaningful text or images. Avoid the temptation to use "click here". Firstly, it can be a misnomer (some Web browsers are not mouse-based), and secondly it is ugly and does not read well, especially in hardcopies of the hypertext. Hypertext should read like normal text as much as possible. For example, rather than using
For more information on pink hippopotamusses, click here.
you should use something like
More information on pink hippopotamusses is available.

Images

Don't include inlined images that are too large, both in physical size and data size (number of bytes). Don't use inlined images that are much bigger than the default Mosaic window size, and keep the size (in bytes) of inlined images as small as possible. Many people have Internet connections that are more akin to dirt roads than information superhighways. Although you may be very pleased with your fancy picture or icon, people who have to wait 10 minutes for it to download will not be so happy with it. It also takes Mosaic much longer to render and display a page containing a large image. Keep your icons small and simple, and try to keep inlined images mostly under 50 Kbytes, and definitely under 100 Kbytes. If you want to display a large image, you can use a smaller "thumbnail" inlined image or some text as a hyperlink to the large image so that it will be displayed by an external viewer.

Some Web browsers don't support inlined images, so make sure whenever you use an inlined image, you include the ALT field with alternate text to be displayed by text-based viewers.

Don't go overboard with clickable images and metamaps. It should be clear what the user is going to find when they click on an image or a map. There is a lot of Mosaic stuff out there where clickable images are used just for the hell of it, and the user sits there for ages waiting for something irrelevant to get downloaded, the viewer spawned, and the image displayed. This gets VERY tiresome VERY quickly. If you are using a non-obvious clickable icon, there should also be some text to say what the viewer is going to get. Clickable images by themselves are usually used just as thumbnails (small inlined images), where clicking on the image spawns an external viewer and displays a larger version of the picture. If you are going to use the clickable image as a link to something else, make sure the user knows what it is.

If you are using a metamap, it should be clear what information is going to be provided when the various parts are clicked. There should also be a separate text version linking to all the documents, for Web browsers that don't support inlined images or maps, or for people who have slow Internet connections and don't want to display images.


Creating images

Converting images to GIF format from postscript does not work too well, especially for fonts. If possible, try to take your raw image (from xfig or whatever figure making package you are using) and save it directly to a pixel map format (like xbm or ppm or tiff). Then convert to GIF or XBM using xv or some other conversion programs such as PBM (this is available at NPAC in /usr/local/pbm on nova). I have written a ps2gif script that uses ghostview and PBM to automatically convert from postscript to a GIF format. NPAC also has Debabelizer, which is Mac software that does good conversions between different image formats.


Miscellaneous

Sign your work (preferably with the <ADDRESS> tag), so people know who to contact with comments or questions about the document.

For documents that are frequently updated, it is a good idea to add a date of last revision.


Paul Coddington, Northeast Parallel Architectures Center, paulc@npac.syr.edu. Last updated 24 May 1997.