James Yolkowski's HTML Style Guide

Based on my experience both viewing and creating web pages, here are several web style tips that I feel are important to heed:

Content and Distractions

On the web, content is king. In most cases, your content will be text, and you should be sure your messages is being communicated clearly:

Gratuitous animation
Animation, which here means "any movement whatsoever", is by its nature distracting. Your viewer's eyes will be drawn to it, rather than your content. That's why banner ads are always animated. So, avoid tags such as <blink> and <marquee>, animated GIFs, and distracting Javascript tricks.
Distracting background images
If you're going to use a background "texture" at all, use something simple. Definitely don't use a texture that makes your page illegible.
Illegible colour combinations
Make sure people can read the page with your selection of foreground and background colours. Also, if you set the foreground colour, also set the background colour (and vice versa), since you have no way of knowing your visitor's default foreground and background colours.
Pages without content
It's annoying to follow a link to a page, only to find nothing substantial there. Don't annoy your viewers.

Standards and Structure

Adhere to standards
The best way to make sure that your pages are readable by everyone no matter what browser they have. It doesn't take long to learn to code HTML properly, and the HTML 3.2 and HTML 4.0 standards, among others, aren't particularly strict. To verify that your pages follow standards...
Validate your pages
Use a service like the W3C's HTML validator to make sure that your pages comply with standards. However, there are certain constructs that are valid HTML but won't render properly in browsers, so...
Check your pages
Check your pages in several browsers, preferably on multiple platforms if possible. An especially good test is to test your page in lynx. If it's readable there it will likely be readable anywhere else.
Cascading Style Sheets (CSS)
Whenever possible, specify formatting information via styles instead of tags such as <font>.
Graceful Degradation
Be sure that your pages will degrade gracefully; that is, if you use "special effects" on your web pages, be sure that your page will at least be comprehensible when displayed by browsers that don't render your "special effects". Remember that a web page designer has limited control over how pages will be rendered in a browser. Don't assume that your pages' visitors will be able to and will want to use plug-ins, multimedia, Java, Javascript, cookies, frames, images (many people on a slow connection browse with images turned off), and so on. Don't count on people upgrading their browser and/or Internet connexion just to view your site.

Accessibility

Accessibility is closely related to structure on your web pages; proper structure is the first step toward high accessibility.

Pages that take too long to load
The best way to make people go elsewhere is to make them wait too long for your page to display. Don't have enormous images on your pages, and always specify the height and width attributes for all of your images. Also, try to avoid enormous tables, as they take a long time to render (see below). Remember that many people still have 56K connexions. At this rate, a page with 70K of text and images can take 15 seconds or more to load.
Always use the alt attribute on <img> tags
If you don't, lynx displays an enigmatic "[INLINE]". It's also harder for those browsing with images off, the visually impaired, and search engines to make sense of your page.
Don't use tables for layout
Using the <table> tag for page layout is semantically incorrect, leads to big pages that take a long time to render, and often makes your pages look bad on browsers that don't support tables. Use style sheets if possible.
Don't use images of text
Just use the text instead, with appropriate styles if required. It takes less time to download and looks better when printed out.

Page Layout

Use a consistent layout for all pages in your site
So that it's obvious whether you're on the same site or have followed a link to somewhere else.
Include navigational links
Viewers may enter your site at any page. If your pages don't contain navigational aids such as "up", "back", "forward", and "home", they won't be able to find the rest of your pages.
Include the page's URL on the page
This helps people who either print your web page off, save it in text format, or e-mail the page and, at a later date, want to re-visit your site. Without the URL, they might be lost.
Include a contact e-mail address
An e-mail address shows that you actually care about your readers. It can also help you out too, as those readers might point out problems with your pages or give suggestions to improve your pages.
When was this page last updated?
It is perhaps a little too strict to demand that everyone regularly update, in perpetuity, every web page that they have ever written. However, at least include a "last updated" date on your pages so that your visitors know how current your information is.

Links

Links are the sine qua non of HTML (remember that the "HT" stands for Hypertext) and the World Wide Web. As such, it is a good idea to make sure that your links have the intended effect:

Is this a link?
This "tip" makes no recommendations but defines two different schools of thought. In the past, browsers always displayed link text (i.e. text within an <a> element) in underline, and displayed a border around link images. Style sheets now allow you to remove these underlines and borders. The advantage of this method is that your page looks a lot better (underlines and borders are distracting). The disadvantage is that you have to use some other method to make sure that your audience knows that there are links on your page. Make sure that your visitors know what is a link.
Make your links obvious
Your users should be able to determine what is a link simply by looking at the page. Don't make them have to (for example) move their mouse all around the page looking for links.
Where does this link lead?
Let your users know whether a link is going to an anchor in the same page, another page in your site or another site entirely, and what to expect once they follow that link.
It's the World Wide Web
When writing about a topic, include links to related sites that you find useful. That way, people searching for information can follow your links instead of having to go back to their search engine and trying again.
Use descriptive link text
Make sure that your link text is long enough to describe accurately the page that you are linking to. "Click here" is not descriptive. Also, you shouldn't be saying "click" because not all of your audience will have mice (mouses?). Use a verb such as "select". Best of all, re-word your sentence so that your link text describes the link, so that "click here" is no longer needed.

Miscellaneous Tips

Instead of having several categories with one or two entries each, I've grouped some of these tips under a "miscellaneous" banner...

Give your pages a professional appearance
I don't (necessarily) mean that you have to hire expensive consultants to design your personal homepage. I do mean that you should ensure that there aren't blatant errors (whether factual, spelling, grammatical or structural) on your pages and that they should look "clean". This tip is particularly relevant if your pages are informational; the rules can be more relaxed for entertainment pages. BTW, if people do misspell words, don't be too hard on them, as many people on the Internet are not native English speakers.
<meta> tags
Using meta tags aids search engines. Don't lie with them though!
"Under Construction" signs
Designing, writing, and testing web pages is not hard, so a metaphor of construction work is inappropriate. It should not take you too long (i.e. long enough that people see your "under construction" images) to put your page together. Another frustrating sight is an "under construction" image on a page with a "last updated" date several years in the past. Search Google for "under construction" and "last updated". Also, don't use "under construction" signs just because you update your page; that's an inherent property of the Web, so don't waste bandwidth advertising it. If you need further arguments against using such images, this page makes a good argument.
Don't make assumptions about your audience
It's no longer valid (and, for that matter, probably never was valid) to assume that visitors to your page are technophiles, geeks, surfers, residents of the United States of America, or male, for example.
Fitting an entire page between a <pre> tag
I've seen several sites that consist almost entirely of plain text pages nested in a <pre> tag. Browsing page after page of monospaced text is not a particularly fun task. If you're going to use HTML at all, mark your pages up—it doesn't take that long!

Links

Some other style resources you may want to check out:

Back to my HTML pages.