HTML Bad Style Page

A collection of DONTs for HTML

I hope this page serves in some way as an educational tool for users learning HTML. This collection is in no way comprehensive, just some of the more common problems that I see.

Please be sure to use the HTML validation service to help find common errors in your HTML ( Yahoo lists a number of other like services). The Why Validate document explains the big picture of why HTML validation is a useful thing to do.

Advanced Web Topics
Top Ten Ways to Tell If You Have a Sucky Home Page
Guide s to Writing HTML Documents
Yahoo's Index of Page Design and Layout Resources
World Wide Web Consortium
Berkeley Software Design, Inc. (who made this site possible)

Probably the #1 rule is that you should not use "Click here" to point to a document. Keep in mind that not everyone can "click" (e.g., some people are using non-graphic browsers) and also consider that you or someone else might ever print out the document and on paper, "click here" just seems silly :-) Therefore, it is best if the text of the link actually has something to do with the content. It also makes bookmarks/hotlinks work much better.
```
 
```
Don't make everything a header just because you want it to be bold, this is not portable and looks really awful unless the user has exactly the configuration you use. Using Netscape's >FONT< tag is also problematical. Users that want real page and font control really want Style-Sheets. I even hear tell that Microsoft is going to support the Style-Sheet standard. Users that want real page layout should certainly demand Style-Sheets from their browser.
Some examples of using headers for font size control.
```
 From an old 
http://www.clbooks.com/ Don't: 
<UL><LI><H1>...</H1></UL> Do: 
<UL><LI><B>...</B></UL> Don't: 
<UL><H3>...</H3><UL><LI>...</UL></UL&g
 t; Do: <H3>...</H3><UL><LI>...</UL> From an 
old 
http://www.enews.com/: Don't: 
<DL><DT><H2>...</H2> 
```
And you also want to avoid constructs like:
```
 Don't: 
<UL><H2>...<P>...<P>...</H2></UL> Do: 
<H2><UL></UL> 
```
You can see from an old screen shot of www.ibm.com how this can make the words so large they wrap if the user has selected a large font size for headers (e.g., people with vision problems). The idea behind HTML is the markup should describe the logical structure of the data, not it's exact representation (therefore, headers are meant to be headers).
```
 
```
Don't split highlighting/formatting elements with structural markup. The only problem here is that it's simply invalid HTML and some browsers will terminate it for you, giving the end user the undesired result of loosing some of the markup that you, the author, intended. Yes, it works on Netscape and MS Internet Explorer but that's because they are playing games with their parsing of the HTML.
```
 From an old 
http://found.cs.nyu.edu/: Don't: 
<I>...<P>...</I> Instead, terminate and restart the 
formatting element (validation tools will catch this kind of problem for 
you): Do: <I>...</I><P><I>...</I> 
```
Don't put structural markup inside of anchors. This is the same problem as the previous example.
```
 Don't: <A><H1>...</H1></A> Do: 
<H1><A>...</A></H1> 
```
Don't use Netscape (or any other browser specific markup, including MS Internet Explorer) specific markup in public documents. As Netscape proved against Mosaic the life of a browser only exists until the next better browser comes along. Why do all that work only to have to go back in a year or so and redo everything.
However, if you are building a private web for some specific purpose it might very well need something that is browser specific. But you should still be aware that by using browser specific features you are going to be stuck with that browser. There are also obviously the cases where public pages simply cannot be done any other way than by using some browser specific feature and by all means, do what you have to do. Basically, I'm just asking that you keep in mind your target audience.
Here is a good example of how using Netscape specific markup can cause problems. This gif image of the old Corel page was taken from an old version of http://www.cybergate.com/~compugrf/corel/index.html. Basically, if the font size and window size didn't match up, the logo would obscure part of the corporate header.
```
 
```
I've seen several cases where people get the overall document structure tags out of order.
```
 Don't: <HEAD> <TITLE>...</TITLE> </HEAD> 
<HTML> <BODY> ... </BODY> </HTML> 
```
```
 Do: The <HTML> tag must appear first... <HTML> 
<HEAD> <TITLE>...</TITLE> </HEAD> <BODY> ... 
</BODY> </HTML> 
```
All document content must be inside the <BODY>...</BODY> tags. <TITLE> is a special case because it is not part of the content of the document, it is meta information about the document. Also note that TITLE's should be context-free (e.g., I should be able to use your TITLE to link to your document or in a bookmark without having to add any additional information).
For example, Company Information is a poor TITLE, better would BSDI Company Information.
```
 
```
Content inside <UL> tags must be indicated with <LI> tags, it's also bad-style to put numbers in instead of using the ordered list tag (which will put in the numbers for you):
```
 Don't: <UL> 1. DISCOVER ... </UL> Do: <OL> 
<LI> DISCOVER ... </OL> 
```
Now, compare these two examples of the above styles.
First using the Don't style:
Then using the Do style:
1. The Quick Brown Fox Jumps Over The Lazy Dog. The Quick Brown Fox Jumps Over The Lazy Dog -- again. The Quick Brown Fox Jumps Over The Lazy Dog -- can you believe it?
Note how the Do style lines up the text nicely on the continuation lines.
```
 
```
Another example of using headers inside of lists (again, leaving out the <LI> tags as required by the HTML spec). Another problem with using headers incorrectly is that document indexing software will not be able to properly weight the text (that is, text in headers is generally giving a higher precedence than other text when you are doing searches -- using headers for font control could make it difficult for you or others to search your documents and find the relevant information they are looking for.
Also, the HTML spec recommends that headers be used in sequential order (H1, then H2, then H3, etc). Again, the reason is that these headers are meant to define the structure of the document.
```
 Don't: <ul> <h3>Training Suites</h3> 
<h4>Basic-to-intermediate topics</h4> ... </ul> 
```
The above is actually using <UL> for indention control. Sometimes you gotta do what you gotta do I guess.
```
 
```
And finally, the biggest style error I see (which actually has little to do with HTML) is that people do not pick URL's for their pages that are permanent. How many links have you tried to follow where it ended up that the other end was simply gone or worse, the author had simply renamed the page and makes you hunt for it. Web publishers really need to start planning ahead so they will not need to rename URL's at a later date.
Please -- Don't move URL's around if you can possibly avoid it.

Writing portable HTML can be a tough job. It's best if you can test your HTML in several of the more popular (and less popular) browsers. I would suggest using at least Netscape, MS Internet Explorer, Lynx, and one of the validation suites if at all possible. However, the most important thing is the content of your site. If you have good content then style will surely follow.

I send my best to all the brave HTML authors out there who put their work online every day.

Please direct questions or feedback to <webmaster@earth.com>