Paragraph indenting

HTML includes a lot, but indenting a paragraph may not be as easy as it looks because multiple spaces are treated as a single space.

The effect we want to achieve (if you didn't figure that out) is that we want the first line of a paragraph indented.

There are a couple of ways to solve this - use the one which is best suited for you.

Non-Breaking Spaces

No matter how many spaces you've written in a row, they will be considered as one single space. However, by using non-breaking space they will not, and therefore they are very suitable if you wish to indent a paragraph. A non-breaking space in HTML looks like this:    So, if you want a paragraph indented five spaces, put five non-breaking spaces in the beginning. It's as simple as that.

This method is better compared to the single pixel trick in some ways. First, no image is required and it will work on almost all browsers even if image-loading is turned off. The downside is that the size of a non-breaking space may not be the same in all browsers.

Single Pixel Trick

This is a quite flexible way to indent a paragraph using a transparent image which is only one pixel big. Put this image in the beginning of the paragraph. The image itself will not be rendered because it's transparent, but a blank space will appear. The advantage with this trick is that you may easily change how big the indentation should be by changing the width in the <image> tag. This allows you to control it even at pixel-level, not just by number of characters.

The picture itself isn't big (43 bytes) so it shouldn't really slow down the download. But still, it's a little bit extra time. If you don't have, or don't know how to do a transparent single pixel, you can get one here (use 'Save link as...' (right mouse button) on the link).

The <spacer> Tag

Well, this is the best method indeed, unfortunately it's a Netscape specific tag so it's just guaranteed to work in Netscape. It will not work with Internet Explorer 3.x. However, I don't recommend that you use this method because nothing will happen if the reader is using another browser than Netscape (and that's quite a lot of people).

The <spacer> tag has three options: horizontal, vertical and block. I will go through the different options one by one.

Use horizontal option if you want to make an indentation or an extra space between words. It will simply insert the given amount of space into the current line. The amount of space is determined by the size attribute. It may look like this:
  <spacer type=horizontal size=30>

The vertical option is like an extended <br> tag. First it makes a line break, then the amount of vertical space is inserted before displaying the next line of the document. Here's an example:
  <spacer type=vertical size=20>

Using the Block option is similar to the single pixel trick. It will create a rectangular block in your document with the size specified with the width and height attributes. You can also use align to change how the block should be displayed with respect to the surrounding text. It works the same way as the align attribute in the <img> tag. Example:
  <spacer type=block height=40 width=50 align=absmiddle>

The example will create a block which is 40x50 pixels and aligns the middle of the block with the middle of the text.

Last updated 970617