web site design


site developers resources and marketing and promotion references

  Home |  Marketing  |  Promotion  |  SEO  |  Site Development  

Web Site Design and Development Tutorials

"Indenting Paragraphs and HTML Documents"

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.


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.


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.


This paragraph is indented using characters! Here's the character set to use &#160. 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


Archives Home || Tutorials || HTML || Marketing || Awards ||
Search Engine Optimization || Site Developer || Web Site Promotion

Email Marketing || Site Sponsorship and Banner Advertising
Internet Scripting  || Newsletter Archives

 T's World Logo,  cover and awards graphics 
by and Copyright 1997-2009  Markus Gemstad 
Copyright 1997-2003 
International Website Builders all rights reserved.
Yet Another  TVEntrprises Production!!