The Web Design Group

Style guide for online hypertext

Document style: Use the right tag for the job

The body part of an HTML document contains the actual information. This information is contained in several block elements, each of which are marked up further with appropriate text-level elements. Block elements include headers, paragraphs and lists. Text-level elements include (for example) <EM>, <CITE> and <TT>.

The block elements can express the meaning of the document most clearly. Use the right one to describe what its contents is about.

As an aside, if a particular element does not "work" the right way in a browser, fix it in the browser, not in the document. Other browsers may handle the element in the desired way, and the "fix" will only break it there. For example, don't skip header levels (from H1 to H3 directly, without H2 in between) just because a particular header looks ugly on your system. Reconfigure the browser instead. If your browser doesn't let you do that, get one that does.

And bear in mind that the site may be "viewed" in unexpected ways, e.g. by indexing robots, character cell browsers, or speaking machines. If the text is marked according to its structure, it will "work" even in situations that you are unfamiliar with: if the text is kludged for one particular browser, there is no way to predict what they will "look" like to others.

Current browsers will support most, if not all, elements from HTML 3.2, but also other, non-standard elements. These are usually experimental and not (or differently) supported in other browsers. Use these with care, and make sure the document still "works" if those elements were omitted.

Tables for layout

Currently, a popular technique to lay out documents in a specific way is to enclose the entire document in a table. Since the various cells can be marked up individually, it is now quite easy to line up various elements in ways that otherwise would not be possible.

There are several disadvantages to this technique. First of all, it usually results in a mess in browsers that do not support tables, unless special precautions are taken. Second, calculating the layout of a large table can only be done once the entire table and all images in it are loaded. This can significantly increase the rendering time of the document.

Third, an over-designed layout takes away one of the greatest advantages of HTML: the ability to adjust the layout to the browser's capabilities and the reader's choices. This is particularly a hazard when the table specifies explicit column widths in pixels or is used to force images to be laid out side-by-side. If the browser window is smaller than the table, the reader is forced to scroll horizontally to read it. This is one of the most annoying things to do.

Presentation vs structure

The text-level elements can roughly be divided into three groups. The presentation elements (such as B, I or TT) concern themselves only with the looks of the text they contain, whereas the structural elements (such as STRONG, EM or CITE) describe the meaning of that text. The third group contains elements like IMG and A, and is more action-oriented.

It is recommended that you use the structural elements whenever you can. They allow a browser to present the text with the most appropriate style available on the platform it is running on. If, for example, an italics version of the current font is not available, emphasized text can be displayed in a different color. This is only possible if the browser knows the text is emphasized. When the text is only indicated with the presentation-element I (italics), it can't know that. It could just as well be a citation or book title.

The presentation elements are most useful if the text must be displayed in that way by convention, for example the book title in a list of references.

HTML 3.2 formally specifies the FONT element, which was previously a browser-specific one. Unless you are very careful when using it, it should be avoided. It gives the author a false impression of control over the appearance of the document. If you use it, then bear in mind that many browser situations will not honor the font name, size or color indicated, and will display the text no differently than normal text. Never use it as a substitute for headers or for appropriate logical markups. Start with a document that's properly marked up as to its logical structure, and then, if absolutely necessary, use FONT tags as optional enhancements only.

For a better solution to presentation problems, use style sheets. These are separate documents which can be used to suggest a style for the presentation of an HTML document, or even an entire site.

Previous Next Table of contents
Web Design Group
Last updated: 12 Nov 1997
Copyright © 1996 - 2006. Arnoud Engelfriet.