Browser Update
Currently, HTML is a very poor graphic design language. What works in one browser often won't in another. Until the situation improves (and it will), designers must learn to anticipate and work around browser variations. It is impossible to design visually for all browsers, but if you accommodate Netscape Navigator 2.0 and Microsoft Internet Explorer 2.0, for MacOS and Windows, you'll look good to better than 90% of the Web. This is a resource to help you do this.
Structural vs. Procedural Tags
There are two kinds of tags in HTML: structural and procedural. Because many cross-browser formatting variations can occur with structural tags, while very few do with procedural, it's important to understand the difference.
Structural tags are useful for marking the logical structure of documents, but not for their indicating their formatting. To understand how structure differs from format, imagine a typical business letter: its logical structure usually includes a date, the recipient's address, a subject line, a salutation, etc. In themselves, these logical parts say nothing about formatting. They can be flush left or right, large or small, or different every time. In HTML, a few structural tags are <P> , <H1> , <BLOCKQUOTE> , and <STRONG> . Most browsers render <P> with a blank line, but all the tag really means is that the marked element is a paragraph - it might just as legitimately appear with an indent and no blank line, as in most books. It is therefore unreliable and inappropriate to use the <P> tag to produce a blank line. Similarly, <BLOCKQUOTE> means only that the marked element is a block quotation. Many Netscape-centric authors use <BLOCKQUOTE> to produce right and left margins. In Internet Explorer 2.0, however, blockquoted text appears in italics. Procedural tags say nothing about a document's structure, but only about style. They literally tell the rendering agent (the browser) the procedure for rendering something. Examples include <BR> , <B> , <FONT> , <ALIGN> , and the ever-popular . So, while the structural tag <EM> (denoting emphasis) might legitimately be rendered in bold, in italics, with underlining, or synthesized into speech with a little stress, the procedural tag <I> can only mean "put this in italics." If you care more about appearance than structure, you will avoid using structural tags - for now at least. Below is a table of common structural tags and suggested procedural equivalents for Netscape and Internet Explorer 2.0.
| Structural tags | Suggested procedural equivalents | |
| <H1 - H6> | Use a combination of <FONT SIZE> and/or <B> , followed by a <BR> . For really major headings, make a GIF. | |
| ||
| <P> | Use <BR> , followed by a spacer-GIF indent between running paragraphs; two <BR> s (and no indent) for breaks in thought within prose. Note that this scheme eliminates the perceived need for horizontal rules to indicate breaks in thought. | |
| ||
| <BLOCKQUOTE> | To produce indented margins, set the text in the second cell of a table, where the first cell has a specified width and contains a spacer GIF or non-breaking space ( ). | |
| ||
| List Elements | As attractive as they might seem for elaborate hierarchical layouts, all list elements, (ordered, unordered, definition, etc.) are unreliable as graphical formatting tools. Use tables instead. | |
| ||
| <CODE> | If you intend a monospaced (typewriter style) font, use <TT> (for "teletype"). | |
| ||
| <EM> , <STRONG> | To emphasize a word of phrase, use <I> for italics, <B> for bold, or some other typographical device. | |
| ||
| <ADDRESS> , <CITE> , etc. | There are a number of structural tags with no obvious formatting implications. Make something up if you must. | |
It is controversial to advise avoiding structural tags, because the concept of structured information is central to the Web. Aesthetics aside, structurally tagged documents are richer as data than procedurally tagged ones. They are more intelligible to search engines and users with special needs, like those with graphically primitive systems, the visually impaired, or archivists and researchers. While structural tags are unreliable as formatting tools, you can't always get what you want with procedural tags, because not all systems can support your request. What if you specify a font that the reader doesn't have? And what does <BLINK> sound like, anyway? Finally, unbridled use of procedural tags has become associated with Netscape's regrettable tactic of introducing new ones piecemeal and unilaterally, in its bid to make the Web look best with Navigator. The message here is not that structural tags are bad, but that you cannot rely on them to produce any particular look.
Fortunately, it should soon be possible to write "good" structural HTML without having to sacrifice distinctive visual formatting. The development that will make this possible is called Cascading Style Sheets, or CSS. It is implemented partially (with many major bugs, alas) in Internet Explorer 3.0, and Netscape has pledged to support it beginning with 4.0. Because CSS is a standard developed by the World Wide Web Consortium, it promises to put browsers on common ground when it comes to formatting, so Web designers can avoid becoming human shields in the browser war. As soon as CSS becomes available to a wide audience - perhaps by the end of 1997 when Internet Explorer 4.0 for MacOS is released - we will recommend adopting it and structural tags in favor of procedural markup. It's an idea that deserves to succeed. 
Core | Top | Feedback