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
s to Writing HTML Documents
Yahoo's Index of Page Design and Layout
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
- 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
Some examples of using headers for font size control.
From an old
t; Do: <H3>...</H3><UL><LI>...</UL> From an
<DL><DT><H2>...</H2> And you also want to
avoid constructs like:
<H2><UL></UL> You can see from an old screen shot
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
<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:
- 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
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
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
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?
Then using the
- 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.
Copyright © 1994,1995,1996
Tony Sanders; (
Last Updated: September 18, 1996
Please direct questions or feedback to
<webmaster at earth.com>