Some HTML Tips, No-No's, In Random Order
Note: These are some comments and tips I provided to some of the team at
my employer, AVENCOM.
Joe Crawford
February, 2001
===========================================================
-----------------------------------------------------------
CORRECT USE OF ALT TAG:
-----------------------------------------------------------
I have seen this use of the ALT tag...
<img ... alt="decorative line">
The proper use for things that are decorative or functional
would be ALT="". If an image is functioning as a bullet,
ALT="*" would work well. A common error is to use
ALT="bullet".
Another common misuse of ALT I've seen (not here) is:
ALT="Firestone logo". When a graphic is a logotype, simply
ALT="Firestone" will do.
-----------------------------------------------------------
-----------------------------------------------------------
PROPER USE OF VALIGN
-----------------------------------------------------------
valign does NOT go into:
<span>
<div>
<p>
<font>
<table>
valign WILL go into:
<tr>
<td>
COMMENT: To get vertical alignment, usually the way to do
that is in a table, in the <tr> and <td> tags. appropriate
values for valign are: top, bottom, middle. valign=center
is NOT valid.
-----------------------------------------------------------
-----------------------------------------------------------
PROPER USE OF VALIGN
-----------------------------------------------------------
In our code I have seen some odd attributes in <table>
some baddies.
valign=top
align=center
align=left
Avoid these as much as possible. If we're moving toward
modular code consistency is best. If we want to center a
table it is best to use:
<div align="center">
<table ...>
<tr>
<td>...</td>
</tr>
</table>
</div>
for tables inside tables, use as follows:
<table ...>
<tr>
<td align="center">
<table ...>
<tr>
<td>...</td>
</tr>
</table>
</td>
</tr>
</table>
-----------------------------------------------------------
-----------------------------------------------------------
&, >, and <
-----------------------------------------------------------
The ampersand, greater than, and less than symbols SHOULD
NOT be left bare in a file, they should be encoded as
entities. They have special meaning in HTML and this is
required.
& > <
Other common entities include
<--non-breaking space
© <--copyright symbol
-----------------------------------------------------------
-----------------------------------------------------------
FONT SIZE
-----------------------------------------------------------
In the <font> tag, it's best to use "relative" sizing.
plus or minus the default.
These are bad:
<font size="1">
<font size="2">
These are good:
<font size="-2">
<font size="-1">
<font size="+1">
<font size="+2">
The principal here is that size="2" may mean different
things on different platforms. When you say "+1", you're
saying, increase the size some factor greater than the
default. It's more flexible for people who have changed
their font sizes in their browsers.
-----------------------------------------------------------
-----------------------------------------------------------
SELECT tags
-----------------------------------------------------------
<select> must have corresponding </select> tags - most
browsers will know when you're done, but it's always best
practice to close all tags.
-----------------------------------------------------------
-----------------------------------------------------------
OPTION TAGS
<option> should have corresponding </option> - same as above.
Also, inside an <option tag, no markup or extra tags are
allowed. I spotted this in some of our code:
<select>
<option>hello<br>
<option>world<br>
</select>
I'm not sure what the intent here was, but those <br> don't
do anything and will probably misinterpreted down into the
page.
If the desired effect is a space, the way to do the above
would be:
<select>
<option>hello</option>
<option></option>
<option>world</option>
<option></option>
</select>
...which would leave blank spaces probably intended. This
would have to be accounted for in the form processing, of
course.
-----------------------------------------------------------
-----------------------------------------------------------
IMG TAG
-----------------------------------------------------------
The required tags for IMG are:
<img>
src
height
width
border
alt
And optional are:
hspace
vspace
name
I advise against leaving off a height or a width for
spacers where you only care about height or width. Use
height="1" or width="1" if there is no necessary value
in your mind.
-----------------------------------------------------------
-----------------------------------------------------------
OPTIMIZING CLASS, VALIGN ATTRIBUTES
-----------------------------------------------------------
Simple is better when applying class.
For example:
<p><span class="body">Four score and seven...</span></p>
Would be simpler as:
<p class="body">Four score and seven...</p>
And this:
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><p><span class="body">Four score and seven...</span></p></td>
</tr>
</table>
Would be better as:
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="body">Four score and seven...</span></p></td>
</tr>
</table>
The idea is to minimize the number of tags and attributes
you have.
On that note - this:
<tr>
<td valign="top"></td>
<td valign="top"></td>
<td valign="top"></td>
<td valign="top"></td>
</tr>
Is easier as:
<tr valign="top">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
-----------------------------------------------------------
===========================================================