Free Home Pages at GeoCities

Kent R. Schnaith's HTML Tyranny Page

This page contains some simple rules that you may use to review a web page. I put these guidelines and style hints together in an effort to distinguish good HTML from bad, and improve the quality of the HTML that I write.

Do you suffer from HTML tyranny?

The designer dictates the appearance of the page when he overrides the browser defaults. Is the designer a benevolent dictator or a tyrant?

Found in Wired magazine:
"Anyone who slaps a 'this page is best viewed with browser X' label on a Web page appears to be yearning for the bad old days, before the Web, when you had very little chance of reading a document written on another computer, another word processor, or another network" -- Tim Berners-Lee

The Future is Now

This document was created when HTML 3.2. was the standard. HTML 4.0 replaces HTML 3.2. As of October, 1997, browsers supporting HTML 4.0 are just becoming available.

The HTML 4.0 Specification (text file) has many examples and notes for writing good html.

Acknowledgments

Thanks to David Siegel for his Web Wonk tips page, where I learned how to make web pages that are easy on my eyes. And also for the High Five award page, where examples of good design may be found.

I would also like to thank Tony Karp at TLC Systems for Art and the Zen of Web Sites and Stupid Web Tricks. The quotations are right on.

Finally I want to mention The HyperTerrorist Checklist of WWWeb Design Errors and Web Style Resources -- Tips and the HTML Bad Style Page and the Top 10 Mistakes in Web Design. Remember, your web page has a vast potential audience. Take the time to make it worth their while.

For more information about HTML see the HTML Writers Guild: List of HTML Resources.

How do you avoid being an HTML tyrant?

1. Content

1.1 Focus on the content first, and presentation second.

Make your page useful and readable and forget about all that gaudy crap.

"Colored or textured backgrounds, weirdly colored text or links, and a preoccupation with appearance over content are sure signs of a first generation web site." -- Pablo PigCasso

Dense Content Web pages maximize content (information) and minimize bandwidth. -- WebGuy Styleguide

1.2 Know your audience.

Who do you expect to read your page? Surfers will happen across your page at random. Searchers of information will find your page while looking for something specific. Customers will find your page to conduct business.

1.3 Be consistent.

A consistent style, even if it's sub-optimal is better than inconsistency.
With Internet Explorer you can begin to take advantage of style sheets.

Use the same color scheme for links throughout your site.

1.4 Sign and date your document.

Example: Last Modified: dd-mmm-yy, <address> by Link-To-Author, at Email-to-Author </address>

1.5 Maintain a last updated date.

Web pages are under more-or-less continuous construction. Tell the user how long it has been since the page was last updated. Don't leave NEW icons laying around if the page hasn't changed in 6 months.

This may be automated with with Server-Side Includes (SSI), or Active Server Pages (ASP), or this Javascript example:
<script language="JavaScript">  </script>

Remember that different countries use different formats for dates. Instead of digits use the name, or an abbreviation for the month.

1.6 Maintain a link to the author.

Every page should contain the mail address of a person responsible for updating and correcting errors on the page.

1.7 Good web pages explain their purpose.

Why was a web page created? What is the purpose of its content?

1.8 Spell check your page.

Doctor HTML has a comprehensive set of tests, including spelling.

What really helps is to have someone else review your work. There's no substitute for an extra pair of eyes.

1.9 Avoid abusive language.

Keep it clean. Your mother or your kids might be reading this page.

1.10 Rate your content.

The PICS Web site at http://www.w3.org/PICS/ contains more information about the PICS rating language.

The RSAC Web site at http://www.rsac.org/ contains more information about the rating system and obtaining a rating for a Web page.

2. Color

2.1 Don't override the browser defaults.

My web browser allows me to choose the default colors and fonts that are most pleasing to me.

Give your readers the freedom to view your information in the format that is most pleasing to them. Don't tyrannize your readers. If you must override the user's defaults, do it in a responsible manner with taste and style.

"Use the defaults, Luke. Use the defaults." -- Obi-Web Kenobi

2.2 Make HOT links a hot color.

Use a hot color (red) to alert the user to the presence of unvisited links. Use a cool (blue) color so visited links do not draw attention.

I changed my browser defaults after reading David Siegel's Link Colors page.

	Background BGCOLOR=	Text TEXT=	Unvisited Link LINK=	Visited Link VLINK=	Active Link ALINK=
Rule	Light	Dark	Hot	Cool	Warm
Simple	White #FFFFFF	BLACK "#000000"	RED "#FF0000"	BLUE "#0000FF"	PURPLE "#800080"
Designer	Off White (pastel)	BLACK "#000000"	MAROON "#800000"	NAVY "#000080""	PURPLE "#800080"
Simple Reverse	BLACK "#000000"	White "#FFFFFF"	RED "#FF0000"	BLUE "#0000FF"	PURPLE "#800080"
Designer Reverse	BLACK	Off White (pastel)	{Pink} "#BC8F8F"	{Sky Blue} "#3299CC"	{Orchid} "#DB70DB"

These colors were originally picked as being the standard 16 colors supported with the Windows VGA palette.

Black = "#000000" Green = "#008000"

Silver = "#C0C0C0" Lime = "#00FF00"

Gray = "#808080" Olive = "#808000"

White = "#FFFFFF" Yellow = "#FFFF00"

Maroon = "#800000" Navy = "#000080"

Red = "#FF0000" Blue = "#0000FF"

Purple = "#800080" Teal = "#008080"

Fuchsia = "#FF00FF" Aqua = "#00FFFF"

Support for other color names is browser specific.

Not every hex code may be supported by every browser. Use the hex codes for colors described in Netscape Background colors or in Background colors.

2.3 With HTML 4.0, you are encouraged to use style sheets instead of HTML elements and attributes for specifying color.

Using style sheets, color attributes are specified differently.

 <HEAD> <TITLE>My Title</TITLE> <STYLE 
type="text/css"> BODY { background: white; color: black} A:link { color: 
maroon } A:visited { color: navy } A:active { color: purple } </STYLE> 
</HEAD>

2.4 If you override the background color or image, override all the other colors as well.

Don't make assumptions about what a user's defaults might be.

2.5 If you override the default colors, choose distinct colors so that the color clearly indicates what the object is.

Don't tyrannize your readers with a bad color scheme. If you must override the user's defaults, do it in a responsible manner with taste and style.

The colors are all interrelated. You cannot change one color without changing its relationship to all the other colors.

If you have the will and talent, it's possible to get spectacular results by overriding the defaults. See Calla's page at http://www.geocities.com/SiliconValley/Lakes/7001/ for example.

2.6 Avoid the medium gray background.

If you must use a gray background, then make it a very light gray, "#CDCDCD".

2.7 Be careful with tiled backgrounds.

Stay away from the pre-made Netscape backgrounds. Discover why they are terrible for yourself.

2.8 Use calm, earthy tones.

Avoid bright primary colors.

2.9 Use light cool background colors to minimize strain.

Pay attention to the contrast between the foreground and the background. Too little contrast makes the text hard to read. Too much constrast is stressful.

2.10 Select your colors from the Netscape color cube.

Don't use colors that the browser won't display.

3. Flow

3.1 Use indentation to keep thoughts together.

You can use the non-breaking space character   to indent your paragraph like this one. Some authors (designers) go to great lengths to make their page appear "just so". In my opinion, the end does not justify the means.

Thanks to <jay> for pointing this out to me. Someday I'm going to learn to use style sheets to make my life easier.

3.2 Use blank lines to separate trains of thought.

A paragraph contains a single thought.

Paragraphs are grouped together into trains of thought. Use horizontal white space (blank lines) to separate trains of thought.

3.3 Sub headings should be closely associated with their paragraphs below.

Don't leave a blank line between the sub-heading and its associated paragraph. Don't leave sub-headings floating "centered" above the paragraph.

3.4 Use a horizontal rule to denote a change of context.

Horizontal rules disrupt the flow of the page. Don't use horizontal rules when a blank line will do. For example, a horizontal rule may be used to separate the content of a page from the navigation area at the bottom.

Sometimes your rule might not stretch as far across the page as you might like. Try this to re-set the browser before your rule. <BR CLEAR=ALL>

3.5 Optimize the readability of your text.

The best web pages are the most readable ones.

Use a font size of at least 12 or 14 points, no smaller.

Adjust your font size and line length so that 10-12 words fit on a line. David Siegel has a test to see if your type preferences are about right. Joe Gillespe has also supplied a Web Ruler to help.

3.6 Use a "decent" left margin.

"A decent left margin makes it easier for your eye to "catch" the left edge of the text as your eye moves down the page. It keeps whatever else you've got on your screen behind the browser window from interfering with reading what's on this page." -- Web Wonk : Controlling Horizontal Space

The author tried using <blockquote> which looked good with IE, but didn't work as well with Mosaic. Style sheets might be the answer.

3.7 Prefer italics over underlines.

Underlines are a poor man's substitute for italics.

3.8 Use font styles correctly.

Shout! with bold.

Whisper with italic.

Snort with tele-type.

3.9 Let the mark up select the font style for you.

<strong> Strong!</strong>

<em> emphasize </em>

<cite> Citation</cite> by Author

<code> Machine-readable</code>

3.10 No Blinking

"Don't blink anything, at any time, for any reason, ever, unless it's to alert the viewer to something that is highly abnormal, or needs immediate attention, or indicates a life-hazard emergency. And especially, don't have links that blink." -- Stupid Web Tricks

4. Images

4.1 Well-made buttons don't need borders.

Set the image attribute BORDER=0.

Set the image alternate text ALT="image name". Don't penalize users who turn image loading off to make browsing faster.

Set the image WIDTH=??? and HEIGHT=?? so the browser doesn't need to re-draw the page when the image finally comes through.

4.2 Use buttons as enhancements to text links.

Use an image to enhance a link, not to replace a text link.

4.3 Take it easy on the animation.

A single well-animated image is much more effective than a pair of them. Three or more animated images resemble an angry crowd.

4.4 Avoid marquees.

A marquee is another form of animation. Actually it's an especially annoying one. Your browser has been designed to handle text of almost any length. There is absolutely no reason to shift a long string through a short window.

4.5 Use the <font> tag.

Don't represent letters and words with images when you don't have to.

Don't abuse the headings to get bigger, bolder text.

4.6 Use images to enhance text, not replace it.

Even if an image or button is the primary way to navigate to a page, keep a text link around to show the user if he's been there before or not.

"In a successful advertisement it's the graphics that grab you, but it's the text that does the selling." -- Pablo PigCasso

4.7 Optimize the download time of your page.

There is no substitute for speed!

"Try holding your breath for as long as it takes your home page to load." -- Henri de Toulouse-LaTech

5. Links

5.1 Avoid the click-here syndrome.

Use meaningful link text.

5.2 Check your links.

Check the links on your page periodically, and remove or update broken links. Maintain the date when your page was last changed.

5.3 Avoid completely self-contained web pages.

A web page without a few links to the rest of the world is a dead end. Give users the ability to find out more.

5.4 Take advantage of the links base context.

Use the default context of the web browser for links to pages in the same site. Avoid coding the name of the server into the page.

5.5 Don't open new browser windows.

Avoid the target=new attribute of a link. <a href=http:"link" target=new>here</a>

6. Tables

6.1 Use tables to control margins and layout.

When support for style sheets becomes standard, we can avoid using tables to work around the limitations of HTML.

6.2 Don't leave table borders turned on.

Borders are fine for debugging, but not for release. When you are satisfied that your table cells are correct, turn off the borders.

6.3 Prefer several smaller tables, rather than one giant table.

Breaking a large table up into smaller tables can reduce the memory requirements of your browser and thus improve its speed.

Avoid putting tables inside tables.

7. Frames

7.1 Be extra careful with frames

Frames are undoubtably the most easily abused feature of HTML.

Learn how to use the target attribute of an anchor. Time after time I find myself going to a different web site, and finding myself trapped inside the previous sites frame. I hate it when that happens. I also hate waiting for the browser to fetch the page inside a frame, especially when there's no visible clue to tell me that it's working on it.

" Para-Site : A web site that wraps its own identifying frame around other sites that are linked from it. Para-sites often create confusion as to who is responsible for a page's content" -- Wired

Links to other web sites should be specified like <a href=http:"link" target="_top">text</a>

The escape from frames trick, linking a page to itself with target="_top", wouldn't be necessary if more people would use frames correctly.

"I have yet to see a web site that was made easier to understand, easier to navigate, or had a better presentation of its content because of the use of frames. In most cases, it made things worse." -- L' Architecte Karp

"Friends don't let friends use frames." -- L' Architecte Karp

8. Coding

8.1 Don't forget the <TITLE>Descriptive Title</TITLE>

Every web page has a title.

Make sure the title is descriptive, so the name on the bookmark list actually means something.

8.2

8.3 Include a DOCTYPE statement.

This is the standard everyone should have been writing to
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

This is what the author's browser can handle
<!DOCTYPE HTML PUBLIC "-//Microsoft//DTD Internet Explorer 3.0 HTML//EN">

This is the new standard
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

Every HTML document should begin with a special <!DOCTYPE...> statement, which identifies the file as HTML, and identifies the "dialect" of HTML which is being used. -- Using a <!DOCTYPE...> Statement

8.4 Validate your HTML.

Have your page validated for correctness. Include a validation icon.

It took the author several tries before this document would pass the validation. It's amazing how robust and forgiving these web browsers are.

Don't rely on the web browser to make up for your sloppiness, conform to the specification.

See Why Validate Your HTML, and HWG HTML Resources: Validation.

Validation services:

A Kinder, Gentler HTML Validator has good error explanations.
WebTechs HTML Validation Service has good documentation of HTML markup that it finds.
Doctor HTML has a comprehensive set of tests, including spelling.
Doctor Watson Will analyze a web page and point out any problems found.

8.5 Avoid unwanted sounds.

Don't obligate your user to listen to your favorite song. Only play sounds when the user explicitly selects them.

8.6 Don't abuse client pull.

Things are slow enough without making the user wait for 12 seconds or more while you cycle through a series of pages.

8.7 Be careful with cookies.

If your web page creates a cookie, and it is accessed by thousands of users, just think of the total space you have consumed on all those peoples computers.

9. References recommended by David Siegel:

The Chicago Manual of Style

Colors:

The Visual Display of Quantitative Information, and Envisioning Information. by Edward Tufte

Typography:

The Form of the Book, by Jan Tschichold; Hartley and Marks Publishers, 1991. (pronounced "Yan Chick-old" )
GRAPHION'S ONLINE TYPE MUSEUM

Writing:

10. HTML Resources

10.1 Useability Resources

Validate Me | | Checked by Doctor HTML!

Last updated: 97-Dec-31,
by Kent R. Schnaith at E-Mail: kent.schnaith at bvc.frco.com.

This page has been counted times since 97-Nov-21.

This page hosted by Get your own Free Home Page

Black = "#000000"	Green = "#008000"
Silver = "#C0C0C0"	Lime = "#00FF00"
Gray = "#808080"	Olive = "#808000"
White = "#FFFFFF"	Yellow = "#FFFF00"
Maroon = "#800000"	Navy = "#000080"
Red = "#FF0000"	Blue = "#0000FF"
Purple = "#800080"	Teal = "#008080"
Fuchsia = "#FF00FF"	Aqua = "#00FFFF"