Basic and Advanced Html Techniques
Presently, there are a number of ways to indent paragraphs and margins in HTML
documents. Some of these are hacks and use bad HTML to accomplish an indent. The best
methods are the use of an image or characters and tables. I will discuss all that I am
aware of and the results they produce.
<UL>Sans<LI>
This is an out and out hack and it is a use of HTML that can't be validated. It results
in indents that vary from none, to too much, depending upon the browser. Using this results
in page layout that is a crap shoot at best!
<DL> Sans <DT>/<DD>
This one is the same as above and I would not even recommend their use in an intranet
environment, little on the open web. If you're looking for a shortcut in an intranet use
the next example. The first two I've mentioned are totally useless because they will not
validate.
<Blockquote>
This is commonly used to indent and results in unexpected font color, size and indents
of varying sizes, depending upon the browser being used. This is a hack and is bad HTML. In
older versions of Netscape it italicizes the font in the whole document. In some browsers
it actually does work, so if you're using Netscape 3 in a controlled environment like an
intranet it is a useful way to indent. I say this is bad HTML, however it does validate.
Characters
This paragraph is indented using characters! Here's the character set to use  .
This is a set that makes a blank space. For more than one use a ; between them. I use
these frequently as spacers in page layout to hold positions in a table. In some browsers
these are visible but the users of these are used to this because this method is used in a
number of different ways, not just for indenting.
Using these for precise layout is a chore because they are not equal to a space when
you string a number of them together. The browsers tend to compress them so you have to
remember to add a couple of extras if you are using them for a large indent or to set
width in a table also if the placement is real small remember that the font in the users
browser will affect this as well.
Images and hspace Attribute
This was immortalized and has come into wide use because of David Siege's' book
"Creating Killer Sites" or something like that. He doesn't need any more plugs!
He does a good job of that himself. Personally, I have found fault with much of what he
has written about HTML usage and would not recommend the book. His method is commonly
referred to as the single pixel trick.
The only problem with this method is it will result in no indent in browsers that don't
support images or hspace. In all cases there is a tradeoff and you have a choice of the
lesser of two evils.
Tables and Page Layout
A combination of either characters or images and tables is the best method for precise
page layout. I use characters for holding a table where the width is small and precision
is required and an image in larger widths. Use either in the <td></td> and
this will result in holding the width of the table to the desired size.
To finish this little tutorial I would like to thank Jim Barchuk of The Survey.Com for his help and suggest for
exact data on the indents you checkout his article
It has a chart of the indent produced in a number of different browsers as well as the
browser offsets.
To Top |
