4.7.1. The <br> Tag

<br> Function: Insert a line break into a text flow Attributes: CLASS CLEAR ID STYLE TITLE End tag: None in HTML; </br> or <br ... /> in XHTML Contains: Nothing Used in: text

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 Internet Explorer:

<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>

Figure 4-18. Give lyrics their breaks (<br>)

4.7.2. The <nobr> Tag

<nobr> Function: Create a region of non-breaking text Attributes: None End tag: </nobr>; always used Contains: text Used in: block

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.

Figure 4-21. The <nobr> extension suppresses text wrapping

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.

4.7.3. The <wbr> Tag

<wbr> Function: Define potential line break point if needed Attributes: None End tag: None in HTML; </wbr> or <wbr ... /> in XHTML Contains: Nothing Used in: text

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 scrollbar 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 poor user must scroll right
<wbr>
to read the entire line.
</nobr>

Figure 4-22. Gentle line breaks with <wbr>

4.7.4. Better Line-Breaking Rules

Unlike some browsers, and to their credit, Netscape Navigator 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>.

4.7.5. The <pre> Tag

<pre> Function: Render a block of text without any formatting Attributes: CLASS ONKEYUP DIR ONMOUSEDOWN ID ONMOUSEMOVE LANG ONMOUSEOUT ONCLICK ONMOUSEOVER ONDBLCLICK ONMOUSEUP ONKEYDOWN STYLE ONKEYPRESS TITLE WIDTH End tag: </pre>; never omitted Contains: pre_content Used in: block

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.

A common use of the <pre> tag is to present computer source code, as in the following example:

<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>

Figure 4-23. Use the <pre> tag to preserve the integrity of columns and rows

4.7.6. The <center> Tag (Deprecated)

<center> Function: Center a section of text Attributes: ALIGN ONKEYUP CLASS ONMOUSEDOWN DIR ONMOUSEMOVE ID ONMOUSEOUT LANG ONMOUSEOVER ONCLICK ONMOUSEUP ONDBLCLICK STYLE ONKEYDOWN TITLE ONKEYPRESS End tag: </center>; never omitted Contains: body_content Used in: block

Line-by-line is a common, albeit primitive, way to center text, and it should be used judiciously. That's because the 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, HTML authors more commonly use <center> to center a table or image in the display window (there is no explicit center alignment option for inline images or tables, but there are styles-related ways to achieve the effect).

<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 is useful for creating distinctive section headers, although you may 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. In general, the <center> tag can be replaced by an equivalent <div align=center> or similar tag and its use should be discouraged.

4.7.7. The <listing> Tag (Obsolete)

<listing> Function: Render a block of text without any formatting Attributes: CLASS STYLE End tag: </listing>; never omitted Contains: literal_text Used in: block

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 that you stay away from using <listing>.

4.7.8. The <xmp> Tag (Obsolete)

<xmp> Function: Render a block of text without any formatting Attributes: CLASS STYLE End tag: </xmp>; never omitted Contains: literal_text Used in: block

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 that 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 in subsequent versions of HTML.

4.7.9. The <plaintext> Tag (Obsolete)

<plaintext> Function: Render a block of text without any formatting Attributes: None End tag: None Contains: literal_text Used in: block