HTML Hot Tip: Indenting A Paragraph

Within the realm of pure HTML, paragraph formatting and layout is not supported. Paragraph appearance is controlled by the browser, and the author gets no say in line spacing, indentation, alignment, etc.

However, it is possible to indent the first line of a paragraph three different ways. The first two stay within the confines of "standard" HTML; the second uses a Netscape extension.

Using a transparent image

The simplest way to indent a paragraph is to place an empty transparent image at the beginning of the paragraph. The image will be rendered as nothing more than blank space, and the paragraph will appear to be indented. If you check the source of this document and download the image at the beginning of this paragraph, you'll see that I used a one pixel high, 64 pixel wide image to effect a 64 pixel indentation.

The downside to this technique is that the browser must download an image to create the effect. Of course, the image is very small (just 48 bytes) and should wind up in the browser's cache after the first download. Still, every extra element adds some time to the download process.

Using the   entity

     Normal spaces in an HTML document are used as word and line breaks, and multiple spaces are treated as a single space. Not so with the non-breaking space, which is always treated as significant by the browser. To add a non-breaking space to your document, use the   entity. To indent a paragraph five spaces (like this one), just put five non-breaking spaces at the beginning of the paragraph.

The good part about this technique is that almost all browsers can handle the   entity. The downside is that you cannot control indentation to the pixel level, and the size of a non-breaking space will vary from browser to browser.

Using the <spacer> tag

A more elegant way to create an indented paragraph is to use Netscape's <spacer> tag. Of course, this only works in Netscape 3.0, but the tag provides a number of interesting formatting capabilities.

There are five attributes for the <spacer> tag. The most important one is the type attribute, which determines the kind of space to be inserted in the document. Acceptable values are horizontal, to insert horizontal space, vertical, to insert vertical space, and block, to create the equivalent of a completely transparent image.

Horizontal spacers simply insert space into the current line before rendering the next element on the line. They can be used to create extra space between words or, as I did a few lines back, an indented paragraph. The amount of space inserted is specified by the size attribute.

Vertical spacers cause a line break, like a <br> tag. They then insert some amount of vertical space before displaying the next line of the document. The amount of vertical space is expressed in pixels using the size attribute.

Block spacers create a rectangular blank area in your document. The size of the block is expressed in pixels using the width and height attributes; the alignment of the block with respect to the surrounding text is provided by the align attribute using one of the seven alignment types discussed above, plus the values left and right to cause text to flow around the block after it has been moved to the appropriate margin.

In a nutshell, here are the three kinds of spacers you can create, with all their expected attributes:

     <spacer type=horizontal size=32>
     <spacer type=vertical size=16>
     <spacer type=block height=50 width=75 align=absmiddle>
The first spacer inserts 32 pixels of space into the current line before the next element is rendered in the line. The second forces a line break, moves down sixteen pixels, and resumes displaying the remainder of the document. The last example creates an empty block 50 pixels wide and 75 pixels tall and aligns the middle of the block with the middle of the current line of text.

It should be obvious now how to indent a paragraph using a <spacer> tag. Just add

     <spacer type=horizontal size=64>
before a paragraph to create a 64 pixel indent, like I did above.