The Ten Errors I Fix Most
Close Your Tags · mail

These are the ten things I fix most often in the campus web office, roughly in order of how often I fix them. Each one has the broken lines, what the validator says about them, and the fixed lines. If you put a DOCTYPE on your page and run it through the validator, I'd bet a week's pay at least three of these turn up. (A week's pay for fifteen hours isn't much, but still.)

1. The tag that never closes
2. Tags that cross
3. An attribute with spaces and no quotes
4. A bare & in a link
5. No ALT text
6. A second BODY tag
7. FONT wrapped around a table
8. A table inside a paragraph
9. The forgotten </A>
10. No TITLE
Bonus: tags that aren't in HTML 4.0 at all

1. The tag that never closes
The big one, and the one on the front page. Leave off a </table>, and Netscape shows a blank page. Leave off a </font>, and the rest of your page keeps the font. Every opening tag that needs a closing tag gets one.

1
2
3
4
5
6

<table border="0">
<tr>
<td>Office hours:</td>
<td>9 to 5, weekdays</td>
</tr>
</body>

1
2
3
4
5
6
7

<table border="0">
<tr>
<td>Office hours:</td>
<td>9 to 5, weekdays</td>
</tr>
</table>
</body>

Which tags need closing? In HTML 4.0, TABLE, A, FONT, B, I, CENTER, UL, OL and TITLE always do, along with most of the rest. A few closing tags are optional, like the ones for P, LI, TR and TD, but I close those too. It costs nothing, and Netscape is much happier with nested tables when every cell is closed.

2. Tags that cross
Two tags open, and they close in the wrong order.

1

<b><i>Open house Friday!</b></i>

1

<b><i>Open house Friday!</i></b>

Tags close in the reverse of the order they opened, like nesting boxes: the last one in is the first one out. Browsers usually sort it out when it's only B and I. They don't always sort it out when it's A, FONT or a table, and that's where pages come apart.

3. An attribute with spaces and no quotes
This one shows up in nearly every FONT tag with a list of faces.

1

<font face=Verdana, Arial, Helvetica>

1

<font face="Verdana, Arial, Helvetica">

Without quotes, the value stops at the first space. The browser takes Verdana as the face, then finds two odd words, Arial, and Helvetica, and treats them as attributes it doesn't know. Anybody without Verdana gets Times, which is exactly what the list was supposed to prevent. The spec only lets an unquoted value contain letters, numbers and a few marks like hyphens and periods. A space, a comma, a # or a % means quotes. My rule is simpler: quote every value, every time, even width="100".

4. A bare & in a link
Common on any page that links to a search or a CGI script.

1

<a href="pix.cgi?trip=1&page=2">

1

<a href="pix.cgi?trip=1&amp;page=2">

In HTML, an ampersand starts a code, like &copy; for the © sign. So when the validator sees &page, it thinks you mean a code named "page," and there isn't one. Write every & in an address as &amp;. The browser turns it back into a plain & before it follows the link, so the link works exactly the same. This isn't only fussiness: if an address has &copy= or &reg= in it, some browsers will read that as the © or ® sign and send your visitor to an address that doesn't exist.

5. No ALT text
The most common error on the Web, I'd bet.

1
2

<img src="logo.gif" width="88"
height="31">

1
2

<img src="logo.gif" width="88"
height="31" alt="Geology Club">

HTML 4.0 requires ALT on every IMG. It's the words that show when the picture doesn't: for somebody on a slow modem who has turned pictures off, in a text browser like Lynx, and for a blind visitor whose computer reads the page aloud. If a picture is only decoration, a bullet or a divider line, give it alt="" so it gets skipped quietly instead of announced.

6. A second BODY tag
My eleven-BODY record page was this error, eleven times.

1
2
3
4
5

<p>Thanks for visiting!</p>
<!-- counter -->
<body bgcolor="#000000">
<img src="count.gif" width="80"
height="20" alt="visitors">

1
2
3
4

<p>Thanks for visiting!</p>
<!-- counter -->
<img src="count.gif" width="80"
height="20" alt="visitors">

This one comes from pasting. A counter service or a guestbook gives you a chunk of code to put on your page, and the chunk is a whole page of its own: HTML, HEAD, BODY and all. Paste in only the part you need, usually one IMG or A tag, and throw the rest away. Browsers don't agree about what to do with a second BODY tag. Some ignore it. Some take its colors, so your page can change color partway down in one browser and not in another.

7. FONT wrapped around a table
Somebody wants the whole page in Arial, so they put one FONT tag at the top and close it at the bottom.

1
2
3
4
5

<font face="Arial">
<table>
<tr><td>Club news</td></tr>
</table>
</font>

1
2
3
4

<table>
<tr><td><font face="Arial">Club
news</font></td></tr>
</table>

FONT is for a run of words. It can't hold a table, a list, a paragraph or anything else that starts on a line of its own. The validator's message for this is the most confusing one it has; it's listing tags that could legally hold a table, and none of them is what you want. And it doesn't even work, because Netscape doesn't carry a FONT from outside a table into the cells. Tony Perlman says it best on his When It Breaks page (number 5): you need a font tag inside every cell. Yes, every one.

8. A table inside a paragraph
This one is invisible. The page looks fine everywhere. It's still wrong.

1
2
3
4
5

<p>Our officers this year:
<table border="1">
<tr><td>President</td></tr>
</table>
</p>

1
2
3
4

<p>Our officers this year:</p>
<table border="1">
<tr><td>President</td></tr>
</table>

A paragraph can only hold words and the things that sit in a line of words: links, bold, pictures. When a TABLE starts, the paragraph ends right there, automatically, whether you closed it or not. So the </p> at the bottom is closing a paragraph that ended four lines earlier. Close the P yourself before the table and drop the stray one. Lists and CENTER work the same way.

9. The forgotten </A>
Small to type, big to see.

1
2

<a href="minutes.html">Minutes
<p>Next meeting: October 5</p>

1
2

<a href="minutes.html">Minutes</a>
<p>Next meeting: October 5</p>

In some browsers, everything after a missing </a> becomes part of the link: blue, underlined and clickable, all the way to the bottom of the page. I once found a department page where the entire faculty list linked to the course schedule. Nobody had noticed for a year, because nobody had clicked on a professor.

10. No TITLE
The one thing the HEAD has to have.

1
2
3
4

<html>
<head>
</head>
<body>

1
2
3
4
5

<html>
<head>
<title>Geology Club</title>
</head>
<body>

The TITLE is what shows in the bar at the top of the window, what people see in their bookmarks, and what a search engine lists when it finds you. Leave it out and your page goes into bookmark lists as a bare address. Almost as bad are the ones nobody changed: I have cleaned up a few hundred pages titled "Untitled" and a few dozen called "New Page 1."

Bonus: tags that aren't in HTML 4.0 at all

BLINK and LAYER only work in Netscape. MARQUEE and BGSOUND only work in Internet Explorer. EMBED was never in any HTML specification. None of them is in HTML 4.0, so the validator flags every one. They won't break your page the way the ten above can; the other company's browser just ignores them. Whether you use them is your call, as long as nothing important depends on them, because half your visitors will never see it.

That's the list. Fix these ten and you've fixed most of what's wrong with most pages I see. Then put the DOCTYPE on, run the validator, and fix whatever's left, one line at a time. Back to Close Your Tags.