The <br> Tag

The <br> tag interrupts the normal line filling and word wrapping of paragraphs within an HTML document. It has no ending tag, but simply marks the point in the flow where a new line should begin. Most browsers simply stop adding words and images to the current line, move down and over to the left margin, and resume filling and wrapping.

This effect is handy when formatting conventional text with fixed line breaks, such as addresses, song lyrics, or poetry. Notice, for example, the lyrical breaks when the following source is rendered by Netscape (Figure 4-18).

<h3>
Heartbreak Hotel</h3>
<p>
Ever since my baby left me<br>
I've found a new place to dwell.<br>
It's down at the end of lonely street<br>
Called <cite>Heartbreak Hotel</cite>.
</p>

Also notice how the <br> tag causes text to simply start a new line, while the browser, when encountering the <p> tag, typically inserts some vertical space between adjacent paragraphs. [<p>, 4.1.2]

<img src="http:kumquat.gif" align=left>
This text should wrap around the image, flowing between the
image and the right margin of the document.
<br clear=left>
This text will flow as well, but will be below the image,
extending across the full width of the page. There will
be white space above this text and to the right of the
image.

Paragraph tags separate leading and following
text flow from the captions. 
<p>
I'm the caption on top of the image.
<br>
<img src="kumquat.gif" align=absmiddle>
This one's centered on the right.
<br clear=left>
This caption should be directly below the image.
<p>
And the text just keeps flowing along.... 

The <nobr> Tag

Occasionally, you may have a phrase you want to appear unbroken on a single line in the user's browser window, even if that means the text extends beyond the visible region of the window. Computer commands are good examples. Typically, one types in a computer command--even a multiword one--on a single line. Because you cannot predict exactly how many words will fit inside an individual's browser window, the HTML-based sequence of computer-command words may end up broken into two or more lines of text. Command syntax is confusing enough; it doesn't need the extra cross-eyed effect of being wrapped onto two lines.

With standard HTML, the way to make sure text phrases stay intact across the browser display is to enclose those segments in a <pre> tag and format it by hand. That's acceptable and nearly universal for all browsers. However, <pre> alters the display font from the regular text, and manual line breaks inside the <pre> tag are not always rendered correctly. [<pre>, 4.7.5]

The extended browsers offer the <nobr> tag alternative to <pre> so you can be sure enclosed text stays intact on a single line while retaining normal text style. The effect is to make the browser treat the tag's contents as though they were a single, unbroken word. The tag contents retain the current font style, and you can change to another style within the tag.

Here's the <nobr> tag in action with our computer-command example:

When prompted by the computer, enter
<nobr>
<tt>find . -name |*.html -exec rm |{|}|;</tt>.
</nobr>
After a few moments, the load on your server will begin
to diminish and will eventually drop to zero.

Notice in the example source and its display (Figure 4-21) that we've included the special <tt> tag inside the <nobr> tag. If the <nobr>-tagged text cannot fit on a partially filled line of text, the extended browser precedes it with a line break, as shown in the figure. The <nobr> segment may then extend beyond the right window boundary.

The <nobr> tag does not suspend the browser's normal line-filling process; it still collects and inserts images and--believe it, or not--asserts forced line breaks caused by the <br> or <p> tags, for example. The <nobr> tag's only action is to suppress an automatic line break when the current line reaches the right margin.

Also, you might think this tag is needed only to suppress line breaks for phrases, not a sequence of characters without spaces that can exceed the browser window's display boundaries. Today's browsers do not hyphenate words automatically, but someday soon they probably will. It makes sense to protect any break-sensitive sequence of characters with the <nobr> tag.

The <wbr> Tag

The <wbr> tag is the height of HTML text-layout finesse. Used with the <nobr> tag, <wbr> advises the extended browser when it may insert a line break in an otherwise nonbreakable sequence of text. Unlike the <br> tag, which always causes a line break even within a <nobr> tagged segment, the <wbr> tag works only when placed inside a <nobr>-tagged content segment and causes a line break only if the current line already had extended beyond the browser's display window margins.

Now, <wbr> may seem incredibly esoteric to you, but scowl not: there may come a time when you want to make sure portions of your document appear on a single line, but you don't want to overrun the browser window margins so far that readers will have to camp on the horizontal scroll bar just to read your fine prose. By inserting the <wbr> tag at appropriate points in the nonbreaking sequence, you let the browser gently break the text into more manageable lines:

<p>
<nobr>
This is a very long sequence of text that is
forced to be on a single line, even if doing so causes
<wbr>
the browser to extend the document window beyond the
size of the viewing pane and the por user must scroll right
<wbr>
to read the entire line.
</nobr>

You'll notice in our rendered version (Figure 4-22) that both <wbr> tags take effect. By increasing the horizontal window size or by reducing the font size, you may fit all of the segment before the first <wbr> tag within the browser window. In that case, only the second <wbr> would have an effect; all the text leading up to it would extend beyond the window's margins.

Better Line-Breaking Rules

Unlike most browsers, and to their credit, Netscape and Internet Explorer do not consider tags to be a line-break opportunity. Consider the unfortunate consequences to your document's display if, while rendering the example segment below, the browser puts the comma adjacent to the ``du'' or the period adjacent to the word ``df'' on a separate line. Netscape and Internet Explorer will not:

Make sure you type <tt>du</tt>, not <tt>df</tt>.

The <pre> Tag

The <pre> tag and its required end tag (</pre>) define a segment inside which the browser renders text in exactly the character and line spacing defined in the source HTML document. Normal word wrapping and paragraph filling are disabled and extraneous leading and trailing spaces are honored. The browser displays all text between the <pre> and </pre> tags in a monospaced font.

HTML authors most often use the <pre> formatting tag when the integrity of columns and rows of characters must be retained, for instance in tables of numbers that must line up correctly. Another application for <pre> is to set aside a blank segment--a series of blank lines--in the document display, perhaps to clearly separate one content section from another, or to temporarily hide a portion of the document when it first loads and is rendered by the user's browser.

Tab characters have their desired effect within the <pre> block, with tab stops defined at every eight character positions. We discourage their use, however, since tabs aren't consistently implemented among the various browsers. Use spaces to ensure correct horizontal positioning of text within <pre> formatted text segments.

A common use of the <pre> tag is to present computer source code, as in the following example which is displayed by Mosaic as shown in Figure 4-23:

<p>
The processing program is:
<pre>
main(int argc, char **argv)
{   FILE *f;
    int i;
    if (argc != 2)
      fprintf(stderr, "usage: %s &lt;file&gt;|n",
          argv[0]);
    <a href="http:process.c">
process</a>
(argv[1]);
    exit(0);
}
</pre>

The <center> Tag

Netscape and Internet Explorer support a special <center> tag that centers the text in each line, individually, after the text flow is filled and wrapped. The <center> alignment remains in effect until canceled with its </center> end tag.

Line-by-line is a common, albeit primitive, way to center text and should be used judiciously. That's because the extended browsers do not attempt to balance a centered paragraph or other block-related elements, such as elements in a list. So, keep your centered text short and sweet. Titles make good centering candidates; a centered list usually is difficult to follow.

Beyond that, you'll rarely see conventional text centered, except for some lyrical prose, so readers may react badly to large segments of centered prose in your documents. Rather, <center> is more commonly used to center an image in the display window (there is no explicit center alignment option for inline images).

Because users will have varying window widths, display resolutions, and so on, you may also want to employ the <nobr> and <wbr> extension tags (see above) to keep your centered text intact and looking good. For example:

<center>
<nobr>
Copyright 1995 by QuatCo Enterprises.<wbr>
All rights reserved.
</nobr>
</center>

The <nobr> tags in the sample source help ensure that the text remains on a single line and the <wbr> tag controls where the line may be broken if it exceeds the browser's display window width.

Centering also is useful for creating distinctive section headers, although you may now achieve the same effect with an explicit align=center attribute in the respective heading tag. You might also center text using align=center in conjunction with the <div> or <p> tags.

The <listing> Tag

The <listing> tag is a deprecated element of HTML 2.0, meaning that its use is discouraged and that it may disappear entirely in subsequent versions of the language. We include it here for historical reasons, since it has the same effect on text formatting as the <pre> tag with a specified width of 132 characters.

The only difference between <pre> and <listing> is that no other markup is allowed within the <listing> tag. So you don't have to replace the literal <, >, and & characters with their entity equivalents in a <listing> block as you must inside a <pre> block.

Since the <listing> tag is the same as a <pre width=132> tag, and because it might not be supported in later version of the language, we recommend you stay away from using <listing>.

The <xmp> Tag

Like the <listing> tag, the <xmp> tag is a deprecated element of HTML 2.0 included here mostly for historical reasons.

The <xmp> tag formats text just like the <pre> tag with a specified width of 80 characters. However, unlike the <pre> tag, you don't have to replace the literal <, >, and & characters with their entity equivalents within an <xmp> block. The name <xmp> is short for ``example''; the language's designers intended the tag be used to format examples of text originally displayed on 80-column wide displays. Because the 80-column display has mostly gone the way of green screens and teletypes, and since the effect of a <xmp> tag is basically the same as <pre width=80>, don't use <xmp>; it may disappear entirely in subsequent versions of HTML.

The <plaintext> Tag

Tired of tags? Insert a <plaintext> tag into your document and browsers will treat the rest of your text just as written with no markup allowed. The text will be displayed in a monospaced font with no other formatting. There is no ending tag for <plaintext> (of course--no markup!).

The main mission for <plaintext> is to make existing ASCII documents palatable to browsers. In the early days of the Web, this may have been necessary, but today's browsers, which handle exceptional documents gracefully thanks to embedded MIME type encoding, have made this tag obsolete. It is included here for completeness, but we strongly discourage its use.