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:
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.
- 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 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.
- 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 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.
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!
Some other style resources you may want to check out:
Back to my HTML pages.