HTML From the Ground Up

by L. Downs

Troubleshooting

As you've probably already discovered by now, there's a big difference between keying in predigested examples and actually creating pages of your own. Creating a page and then having it display incorrectly can be frustrating, to say the least. However, there are a few basic guidelines that can keep you out of most trouble, as well as make the tracking down of problems a bit less frustrating.

When you write HTML, you're really writing a simple computer program. Like other computer languages, mistakes in HTML generally fall into one of two categories: syntax and logic. In addition, computers don't generally make mistakes of their own, but they're only too happy to display yours. If something doesn't display correctly, keep in mind that it's very likely that the mistake is a) yours, and b) pretty simple to find and correct.

Syntax is a fancy word for grammar, and computers are much less forgiving of bad grammar than even the most tyrannical English teachers. If you leave out a parenthesis in a paper, the chances are that your reader will still be able to understand what you've written. Leaving out a symbol in a computer program, on the other hand, will almost certainly cause an error of some kind.

In HTML, the most common syntax errors are:

a missing tag;
a missing pointy bracket,
a missing quotation mark or two,
a misused tag, and
a misplaced tag.

The most common tag to leave out is the second tag of a pair, such as the </A> tag at the end of a link you've created. If you do this your entire document from that point on turns into a link (normally blue underlined text). Similarly, leaving out a  tag at the end of bolded text will result in everything from there on appearing bolded.

A more difficult missing tag to identify is one of the required tags (<HTML>, <HEAD>, <TITLE>, or <BODY>). Omitting one of these (especially the end one, such as </HEAD>) can cause very strange things to happen to your document, such as graphics refusing to appear, etc. By the way, misspelling a tag is the same as leaving it out, since HTML will ignore any tag it doesn't understand (such as a "<HAED>" tag).

Leaving out one of a tag's pointy brackets will really confuse your browser, since it won't know where the tag ends. Usually the browser will assume that everything from the first bracket (<) to the first end bracket it finds (>) is part of your tag. Since the contents of a tag don't display as text on your page, this can cause big chunks of text to unexpectedly disappear. Similarly, leaving out quote marks when required (such as the graphics filename in an IMG tag) can result in the browser trying to guess just where the filename ends and other HTML information begins. Again, the result can be disappearing text or graphics.

Placing something inside a tag that isn't allowed (such as putting an SRC="filename" attribute into a heading tag) will usually just result in the inappropriate information being ignored; sometimes the results can be unpredictable, though, depending on your browser. One common mistake is putting the ALIGN attribute into an image tag (such as <IMG SRC="mygraphic.gif" ALIGN="CENTER"> in order to center it. Since ALIGN="TOP" and ALIGN="BOTTOM" are perfectly legal in an <IMG> tag, it's easy to assume that ALIGN="CENTER" should be too. Unfortunately, it's not, and trying to center your graphic this way can be very frustrating as you keep rechecking your code looking for some other mistake. The only reliable way to avoid this is to acquire the necessary encyclopedic knowledge of which attributes are legal in which tags. (Or buy a good reference manual.)

Finally, although the order of tags isn't usually very important, you do need to realize that when you're working with multiple paired tags (such as  and ) you should always nest them, not overlap them. What this means is that if you want to put a pair of tags inside some other pair, this is OK:
<A HREF="http://www.a.place">Jump here</A>
but this isn't:
<A HREF="http://www.a.place">Jump here</A>
This can cause really bizarre problems if you do this with any of the required tags, like this:



<HEAD>


<TITLE>


My title


</HEAD>


</TITLE>

Some of the hardest problems to track down are a result of this.

Finally, let your browser do some of the work for you. If you open your page in your browser, and then choose View -> Page Source (in Navigator) or View -> Source (in Internet Explorer) your browser will show you your HTML code with any mistakes highlighted (although the real problem may be earlier in your code). This can often allow you to identify problems that are otherwise hard to spot.

In the next lesson: Backgrounds and colors.

Portions of this tutorial originally appeared in Technotes, a publication of the UNLV Libraries, and are copyright by the University of Nevada, Las Vegas; used by permission. All remaining material © 2003 Lamont Downs.