Things to Avoid

This section concentrates on mistakes in HTML authoring that are more problems of aesthetics then problems of device-independence.

Contents

• Mixing HEAD and BODY Elements
• Using White Space Around Element Tags
• Heading Usage
• Meaningless Link Text
• Physical vs. Logical Character Emphasis

Mixing HEAD and BODY Elements

HTML documents should not mix those elements which belong in the HEAD of a document with those which belong in the BODY. This is not an absolute requirement, but it does make a certain amount of common sense for readability of HTML code, and for conformance with possible future browsers which may not support the mixing of these elements. Essentially, it lacks serious style points >=).

Using White Space Around Element Tags

In general, the use of white space around element tags should be avoided. If white space immediately follows a start tag, for example, the style changes implied by that element may be applied to the initial space, as well. For instance, <A HREF="http://www.cs.cmu.edu/~tilt/"> CZeCh THIZ 0uT </A> would be rendered as CZeCh THIZ 0uT . On some browsers, there may be white space around the anchor, which adds unwanted unsightliness to the rendering, and may lessen the impact of the document. (This comment really applies to white space immediately following start tags, and immediately preceding end tags).

Heading Usage

The HTML specification points out that a heading should not be more then one level below the heading which preceded it. That is, <H3> should not follow <H1>, etc.

Also, it is pointed out that "a heading element implies all the font changes, paragraph breaks before and after, and white space (for example) necessary to render the heading". Extra highlighting elements are discouraged, therefore.

Meaningless Link Text

When creating documents, make sure that your links are meaningful -- that is, that they avoid online-specific references, and that they don't detract from readability. The text of your links should flow well in the context of the rest of your text (especially avoid the click here syndrome!), and your text should also be able to stand alone as a printable document.

In other words, avoid using sentences like, "You can find out more information about cows by clicking here". (This is also bad because it refers to "clicking", which assumes that everyone is using a mouse with their browser!) A much better alternative is "More information about cows is available."

Physical vs. Logical Character Emphasis

Since HTML (and also SGML) is designed to be a device independent language for describing the content of documents, most of the elements within it aren't intended to give direct control to the author over how the final page layout will look. The major exceptions to this are in the character highlighting elements.

There are two types of character highlighting elements -- physical and logical. The physical styles involve things like "italic font", "boldface", etc; while the logical styles are things like "emphasis", "citation", "strong", etc. It is strongly recommended that you employ the logical styles rather than the physical styles in your documents. Using <I></I> to render text in italics will only be effective on those browsers which are capable of displaying italics -- which all browsers are not guaranteed to do. It is far better to encode semantic content -- to describe things in terms of logical styles -- and then allow the browser to display that semantic structure as best it can, given its display capabilities.

So, instead of

<I>italics</I>

you might use <EM>emphasized</EM>, or a <CITE>citation</CITE>, and instead of

<B>bold</B>

you might use <STRONG>strong</STRONG>.

This also leaves the possibilities open in the future for more sophisticated uses of these semantic renderings, which have much more inherent meaning than font styles like bold or italic.

(Unfortunately, the jury is still out on this one. One argument against logical character styles is that it turns out to be a bottomless pit, attempting to define logical styles for every possibility. Physical styles, combined with the context of the text in which they are placed, seem to provide a much richer set without a huge number of tags. Oh, well. Use logical styles when you can, though.)

You may also want to

• Go on to "Deprecated and Obsolete Elements"
• Go back to "Common Errors"
• Return to the table of contents

The upshot is, this document has always been meant as a public service, and will remain a public service. I hope you've found it to be useful; I've had fun providing it for your use.