Web design development. HTML Text Margins And Indents

HTML started out with fairly simple text alignment capabilities: flush left text, with a ragged right margin. While certainly functional, this left a bit to be desired. As HTML developed, various features were added onto the language that allowed right aligned and centered text, culminating with a fairly standard approach in the new HTML 4.0 standard.

The easiest way to align text is to add the ALIGN attribute to the appropriate tag. Originally used with the <DIV> tag, the ALIGN attribute can now be used with the <P> tag and the heading tags, <H1> through <H6>. The value of this attribute is either left, right, center, or justify. These values will yield left-aligned, right-aligned, centered, or justified text.

While we most often think of alignment when dealing with the flow of text, remember that changing the alignment of your headings often gives a dramatic impact with little effort on your part. Right-aligned headings (using <H3 ALIGN="right">) are a simple way to make your document look a little different.

One last detail about alignment: Don't use the <CENTER> tag to center text when <P ALIGN="center"> will do the same thing. The <CENTER> tag is deprecated in HTML 4.0 in favor of using the ALIGN attribute for all your alignment needs.

Margin Control

Margin control in HTML is nearly impossible without resorting to styles, which we'll cover next week. However, you can create indented text, as long as you don't worry about the exact amount of indentation. There is no explicit tag in HTML that changes the value of the left and right margins for your text flows. There are, however, two ways to accomplish this trick.

The easiest way to get indented text is to place the desired content within a <BLOCKQUOTE> tag. This tag will move both margins in a bit, creating something like this:

Jack and Jill went up the hill to fetch a pail of water. Jack fell down and broke his crown and Jill came tumbling after. The <BLOCKQUOTE> tag shifts the margins in, and a <P ALIGN="justify"> tag makes the text fully justified.

Unfortunately, the browser sets the margin width, and there is little you can do about it.

For better control of indented text, you'll need to resort to the HTML author's best friend, the table. By creating a three column table using WIDTH="100%", you can alter the widths of the left and right columns to create margins around your text in the middle column. This table creates a 75-pixel left margin, and a 25-pixel right margin:

<table border=0 width=100% cellpadding=0 cellspacing=0>
<tr>
  <td width="75"><br></td>
  <td>Text goes here</td>
  <td width="25"><br></td>
</tr>
</table>

Jack and Jill went up the hill to fetch a pail of water. Jack fell down and broke his crown and Jill came tumbling after. The left and right table columns shift the margins in, and a <P ALIGN="justify"> tag makes the text fully justified.

Without resorting to styles, this is the only way to get absolute control over your left and right margins.

Indented paragraph

One of the basic layout tools of conventional text, indenting the first line of a paragraph, is missing from any version of HTML.

While some may resort to illegal usage of lists and other tricks, the easiest way to indent the first line of a paragraph is to use the nonbreaking space character entity. This entity ( ) inserts a space into the text flow, but that space will not cause a word break. Multiple spaces will not be collapsed to a single space, like regular white space in your document.

To get a single character indent for your paragraph, just place a non-breaking space ( ) at the beginning. If you want a larger indent, all you need to do is add more non-breaking spaces. Here's our table-based margin example the first line is indented using four non-breaking spaces:

This is some sample text, designed to wrap and flow and fill out this sample paragraph. The left and right table columns shift the margins in, and a <P ALIGN="justify"> tag makes the text fully justified.

All things considered, alignment, margins, and indents are a pain to tolerate with HTML. Style sheets are the best way to achieve professionalism.

<< BACK