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>

-----------------------------------------------------------
===========================================================
blog comments powered by Disqus