Formatting Elements

When the browser begins to format text in an HTML document, it lays out the text according to the information given to it by the HTML elements. One side effect to this is the fact that it ignores formatting information that isn't specified by tags.

In other words, it ignores the most obvious formatting information that you, as an author, see: the way the text is already laid out in the file. It pays no more attention to the end of a line, for example, than to a space between words: as far as the browser is concerned, these are the same. It also ignores any apparent indenting or centering -- any number of spaces is equivalent to nothing more than a single space. Even the blank line between paragraphs is treated as nothing more than just a break between words.

This is similar to the "word-wrapping" feature in most word processors. The browser "wraps" the text to fit the space available. If two pieces of text represent separate paragraphs (and you would like them to look that way), then you have to tell the browser this, using (of course) an HTML element.

Paragraph (P)

The element used to indicate paragraph divisions is the Paragraph element, designated by the P-tag:

<P> </P>.

Notice that this element does not represent the start of a paragraph, nor the end, but encloses the whole paragraph.
However, the P-tag does NOT have to be paired tag; the browser is smart enough to figure out that a new paragraph element (indicated by <P>) implies the end of the previous paragraph element. The </P> is optional at the end of the paragraph.

There are many cases where P-tags aren't needed, because the element is its own paragraph, so a paragraph break is already implied. One place where this is true is around section headings (we'll learn about the heading elements shortly).

Line Break (BR)

Within paragraphs and other paragraph-like elements, there's another, related element: the

<BR>

or line break, element. This element tag is used when you want a particular piece of text to start on a new line, rather than being a whole new paragraph (or other element). The BR tag is NEVER a paired tag-- it doesn't contain anything, it just sits there in the middle of a paragraph.

Headings (H1,H2,H3,H4,H5,H6)

Heading elements, as mentioned above, indicate the start of a new part (logically) of a document. There are different levels of heading, corresponding to the different levels of document structure. Rather than assume any particular structure on your part, the levels are simply numbered, and you may use them as you wish. The tags are <H1>, <H2>, <H3>, and so on. These are all paired tags.

For example, you might decide that level 1, the topmost level, should correspond to the "document" level; that is, that each different document you create will have a level 1 heading at the top. You might then decide that level 2 would correspond to chapter titles, level 3 would correspond to section headings, and level 4 to subsections. There are a total of 6 heading levels, but you don't have to use them all.

For most browsers, the effect that heading level has on the text is that the size changes (level 1 is the largest); headings might also be bolder than normal text. Keep in mind, though, that changing the text size is not the purpose of headings; it is simply the way they are most often expressed. The purpose is to clarify the different levels of structure within your document.

Horizontal Rules (HR)

If you want to really separate sections, you can use the

<HR>

, for an "Horizontal Rule" element. This draws a line across the page between the elements that it separates. Like BR, this is ALWAYS an unpaired tag.

Preformatted (PRE)

For those who don't want to lose the formatting in their original text, there's the Preformatted element, indicated with the tags

<PRE> </PRE>

(this one IS paired).
The PRE element indicates that a block of text is pre-formatted: in other words, the browser should break it up just exactly as it is, line breaks, paragraphs, indenting, and everything. This is useful for quickly getting in text that you don't have time to specify the formatting for. The down side is that the text looks awful (a sort of typewriterish look) and, more importantly, you can't include many other elements inside a block of PRE-formatted text. But it makes a good tool for "rough draft" documents.

For more examples, see the Body Elements section of the HTML chart.

last update: JAH, September 9. 1997.