It is crucial to good web design that you understand what HTML is, and what it is not.

HTML describes the content and structure of a document (paragraphs, sections, tabular information, and links) but not its exact layout on a page. Not only will your document be laid out and arranged differently on every different browser, but even the same browser will make it look different on different video monitors, different operating systems, and so on. The World Wide Web is not print media, and most of the worst design mistakes in the Web are made by people who forget this important distinction. This particular way of fitting a round peg (HTML) into a square hole (exact page layout) is likely to be a major headache for you if you insist on trying it -- so don't bother. Relax and embrace HTML for what it is. If you need paper-like layout control, publish on paper or use a specialized tool like Adobe Acrobat instead of HTML.

What does this mean in practical terms? For starters, you will not know exactly where text will wrap at the end of lines. Don't believe me? While viewing this very page, try using your pointer (mouse) to resize the browser window. Watch how the text wraps differently, becoming narrower or wider as needed. Good web design doesn't just allow this to happen, it takes advantage of it as a feature. Some browsers will display, or render, the same page element in different ways. What typefaces does the visitor to your site have installed on his or her machine? A lot of [bad] web designers embed tags in their pages that request specific typefaces, like "Uncial Bold 12 point". But the typeface comes from the PC, not from the web, so if a visitor has never heard of your favorite fancy typeface, their view of the page will be totally different! Different kinds of computers display graphics in different ways, depending on the capability of the hardware. Some computers (such as mainframes and VAXes) don't have graphics at all! Good web design not means that your pages will work correctly on a wide variety of computers, operating systems, and browsers.

Here are some specific bad habits you should avoid:

• Relying on text "lining up" underneath or above something else. Web browsers, according to the HTML standard itself, are supposed to treat any amount of whitespace as if it were a single space. Whitespace consists of the space (blank) character, the tab character, and the end of a line of text in your HTML source. So the HTML:

  <sometag>
      This is      my text,
                 but it does not all
      fit on a line.</sometag>

  is exactly the same to the browser as this:

  <sometag> This is my text, but it does not all fit on a line. </sometag>

  If you really must make things line up vertically, there are several correct ways to accomplish this (some of them are discussed later in this tutorial). But putting line breaks and spaces, as you would on a typewriter, generally will not work as you expect.

• Relying on multiple blanks or tabs to space things apart for easy reading. See above -- the browser is designed to disregard multiple blanks or multiple tabs. If yours happens not to do so, then it isn't working according to HTML standards, and woe unto you if you rely on that being the case for everyone who visits your web site!
• Relying on all the letters being the same size. On most computers, the page you are now viewing will use a proportional typeface which means that some letters (such as "m") are much wider than others (such as "i"). If for some reason you really need all the letters to be the same size, use the <pre>...</pre> tag set (discussed later) around the applicable text.
• Assuming that everyone's screen size is the same as yours. Computer screens have different numbers of dots (pixels) horizontally and vertically on the screen. Some older machines may have 640 horizontally by 480 vertically, while a high-end workstation or business PC might have 1280 horizontally and 1024 vertically, or perhaps even more. The more pixels on the person's screen, the more of your page they are likely to see at one time. Most modern PCs have either 800 or 1024 pixels horizontally and either 600 or 768 pixels vertically, but don't rely on this always being the case. The best way to test your pages is to have your own screen set for at least 1024 by 768 pixels, and then to view your page while manually resizing your browser from full screen to about 3/5 of the screen in each direction.
• Testing in only one browser. If you're serious about web pages, get a copy of Netscape Navigator and Internet Explorer on your computer, and test with both. This is a minimum for good web design practice.
• Assuming everyone has the same fonts (typefaces) as you. Most computers have Courier (or some other non-proportional typeface) and Times Roman (or some other proportional typeface) as a minimum, but even that is not guaranteed. Use whatever fonts you wish, but have your friends -- especially those whose computers are different from your system -- test your pages before you publish to the world. If the viewer doesn't have the typeface you used, their browser will substitute something else. Sometimes it will make a good guess, sometimes not. If you specify any typeface in your documents, test the document to see if it is still nicely readable if that typeface is not available. Typefaces are found on the browser PC, not sent from the server with the web page, unless you use special advanced features that (1) are beyond the scope of this tutorial and (2) don't work with every type of computer or every browser.

In general, the philosophy of web page design should be to fail gracefully. In other words, feel free to use all the advanced features (frames, graphics, sound, video clips, typefaces, and so forth) that you wish, but make sure that your pages are still pleasant to view even when these new bells and whistles aren't available to the browser. The rest of this tutorial will point out specific ways to achieve this goal.