Elements of HTML Style

These are some tips on formatting which I've learned while bringing up the UCI Bookstore's Web server. I don't mean for them to sound as though they're coming from Mount Sinai; I just thought they might be interesting and/or useful.

This guide, brief as it is, can be supplemented by Tim Berners-Lee's much more compendious and Sinaitic treatise on the subject, A Style Guide on Online Hypertext, and his equally valuable Etiquette for Web Administrators.

As you are all aware, HTML, at least in its present implementation, privileges content over form; hypertext is supposed to be a "free-form medium." Although, in the end, the client software is responsible for the outcome of formatting commands, basic principles of graphic design still apply to your use of those commands:

1. Even spacing between things of equal importance.

2. Greater spacing between organizationally distinct categories.

3. Consistent use of modes of emphasis; don't use bold or italic unless genuinely necessary, and make sure that you have a formula governing which to use when. Similarly, a formula should determine how and where you use heading levels; they really are meant to give a clue as to the organization of your document.

4. Horizontal rules (<hr>) are a great help in separating sections of a page, but they are not a panacea. If you're writing a short document restrict yourself to one per page; in a longer document, one or fewer per viewer page is a good rule of thumb. Try to think of a formula for using them; for instance, you might want to use one to separate an area where you list navigational jumps from the rest of your document.

5. Don't leave unimplemented links active. Repeated Error 404s (file not found) leave people frustrated. If you don't have a file or script to link to, but you still want to indicate that the anchor text will be a link at some point, change the link to a style marker which has some point of similarity with the marking for a link, but which isn't close enough to be confusing. For example, most visual Web browsers underline links and put them in a different color; line mode browsers tend to put both links and underlines in inverse text For this reason, changing the link declaration, <A HREF="[unarchived-link]">Anchor Text</a> to <u>Anchor Text</u>, the underline marking, makes a good deal of sense. When you're ready to implement the link, it's the work of a moment to change things back.

6. Check for spelling and grammar errors. WWW is a means of communication, and neatness does count; at least in theory, you're visible "world wide." Restraint in emphasis is as necessary for punctuation as it is for fonts. Consider using exclamation points and question marks sparingly. The same goes for ellipses, a/k/a suspension dots.

7. Consider people with systems and browsers different from yours. Not everyone has a browser that supports forward and backward links easily, or, for that matter, caches them. Consider putting links in various directions at the bottom of your pages, whether as icons or straight text. Be consistent in the text you use for each link. In the same vein, when you have inline images, text alternatives for line mode browsers, via ALT, will really help the people using them. Test your web from a variety of machines and browsers.

8. Often, webspaces contain a mixture of information useful or enjoyable to others and personal experiments. The line between these two becomes fuzzier in "personal webspaces" such as author pages. Even in author pages, people still need high standards of usability. One de facto standard for author pages includes:
   
   • picture
   • name of author
   • organizational affiliation
   • research interests
   • publications
   • leisure interests/personal description
   • contact addresses
   Experiments in cyberspace could make up a separate page, accessible from the author page. In short: determine what the purpose of your site is, and test everything on your site against that purpose; things that are intentionally personal and idiosyncratic should be clearly separated from things that are meant for people to use/enjoy. Clear, polite warnings are appropriate here. Innocent-looking links which lead to 1 Mb image loads, or to pages that say "Go Away, Blighter!" with no links back, should be restricted to areas where the user has a sense that such surprises are coming. A standard disclaimer, such as "This webspace is under development and may change frequently," doesn't cover this kind of activity. A disclaimer such as "Those who don't like my images should go fry themselves" is bad form, but it is especially bad if there's no clear indication as to the nature of those images or the space that contains them.

Jump to: