[Chapter 4] Text Basics

In this day and age of hoopla and hype, how has become almost as important as what --and in some cases, more important. Any successful presentation, even a thoughtful tome, should have its text organized into an attractive, effective document. Organizing text into attractive documents is HTML's forte. The language gives you a number of tools that help you mold your text and get your message across. HTML also helps structure your document so your target audience has easy access to your words.

Always keep in mind while designing your documents (here we go again!), that HTML tags, particularly in regard to text, only advise--they do not dictate--how a browser will ultimately render the document. Rendering varies from browser to browser. Don't get too entangled with trying to get just the right look and layout. Your attempts may and probably will be thwarted by the browser.

4.1 Divisions and Paragraphs

Like most text processors, a browser wraps the words it finds in the HTML text to fit the horizontal width of its viewing window. Widen the browser's window and words automatically flow up to fill the wider lines. Squeeze the window and words wrap downwards.

Unlike most text processors, however, HTML uses explicit division (<div>), paragraph (<p>), and line-break (<br>) tags to control the alignment and flow of text. Return characters, although quite useful for readability of the source HTML document, typically are ignored by the browser--HTML authors must use the <br> to explicitly force a text line break. The <p> tag, while also performing the task, carries with it meaning and effects beyond a simple line break.

The <div> tag is a little different. Codified in the HTML 3.2 standard, <div> was included in the language to be a simple organizational tool--divide the document into discrete sections--whose somewhat obtuse meaning meant few authors used it. But recent browser innovations--the align and style-related style and class attributes--now let you more distinctly label and thereby define individual sections of your HTML documents, as well as control the alignment and appearance of those sections. These features breathe real life and meaning into the <div> tag.

By associating a class name with the various sections of your HTML document, each delimited by a <div class=name> tag and attribute (you can do the same with other tags like <p>, too), you not only label those divisions for automated processing and management (collect all the bibliography divisions, for instance), but you may also define different, distinct display styles for those portions of your document. For instance, you might define one divisional class for your document's abstract (<div class=abstract>, for example), another for the body, a third for the conclusion, and a fourth divisional class for the bibliography (<div class=biblio>, for example).

Each class, then, might be given a different display definition in a document-level or externally related style sheet: the abstract indented and in an italic face (div.abstract {left-margin: +0.5in; font-style: italic}, for example); the body in a left-justified roman face; the conclusion similar to the abstract; and the bibliography automatically numbered and formatted appropriately.

We provide a detailed description of style sheets, classes, and their applications in Chapter 9, Cascading Style Sheets.

The `<div>` Tag

As defined in the HTML 3.2 standard, the <div> tag divides your document into separate, distinct sections. It may be used strictly as an organizational tool, without any sort of formatting associated with it; it becomes more effective in this regard if you add the class attribute to label the division. The <div> tag may also be combined with the align attribute to control the alignment of whole sections of your document's content in the display.

The align attribute

The align attribute for <div> justifies the enclosed content to either the left (default), center, or right of the browser display. The <div> tag may be nested, and the alignment of the nested <div> tag takes precedence over the containing <div> tag. Further, other nested alignment tags, such as <center>, aligned paragraphs (see <p> in 4.1.2), or specially aligned table rows and cells, override the effect of <div>.

The nowrap attribute

Supported only by Internet Explorer, this attribute suppresses automatic word wrapping of the text within the division. Line breaks will occur where you have placed carriage returns in your HTML source document.

While the nowrap attribute probably doesn't make much sense for large sections of text that would otherwise be flowed together on the page, it can make things a bit easier when creating blocks of text with many explicit line breaks: poetry, for example, or addresses. You don't have to insert all those explicit <br> tags in a text flow within a <div nowrap> tag. On the other hand, all other browsers ignore the nowrap attribute and merrily flow your text together anyway. If you are targeting only Internet Explorer with your documents, consider using nowrap where needed, but otherwise, we can't recommend this attribute for general use.

The lang attribute

The lang attribute lets you specify the language used within the division. The value of the attribute is any of the ISO standard two-character language abbreviations. For example, adding lang=en tells the browser that the division is written in English. Presumably, the browser may make layout or typographic decisions based upon your language choice.

This attribute is only supported by Internet Explorer; all other browsers ignore it. Even within Internet Explorer, there are no behaviors defined for any specific language.

The style and class attributes

Use the style attribute with the <div> tag to create an inline style for the content enclosed by the tag. The class attribute lets you apply the style of a predefined class of the <div> tag to the contents of this division. The value of the class attribute is the name of a style defined in some document-level or externally defined style sheet. In addition, class-identified divisions also lend themselves well for computer processing of your documents, such as extraction of all divisions whose class name is "biblio," for example, for the automated assembly of a master bibliography. [the section called "Inline Styles: The style Attribute"] [the section called "Style Classes"]

The `<p>` Tag

The <p> tag signals the start of a paragraph. That's not well known even by some veteran webmasters because it runs counterintuitive to what we've come to expect from experience. Most word processors we're familiar with use just one special character, typically the return character, to signal the end of a paragraph.

In the recommended HTML way, each paragraph starts with <p> and ends with the corresponding </p> tag. And while a sequence of newline characters in a text processor-displayed document creates an empty paragraph for each one, HTML browsers typically ignore all but the first paragraph tag.

In practice, you also can ignore the starting <p> tag at the beginning of the first paragraph, as well as the </p> tag at the end of all paragraphs, since they can be implied from other tags that occur in the document, and hence safely omitted. For example:

<body>
This is the first paragraph, at the very beginning of the 
body of this document.
<p>
The tag above signals the start of this second paragraph. 
When rendered by a browser, it will begin slightly below the 
end of the first paragraph, with a bit of extra whitespace 
between the two paragraphs.
<p>
This is the last paragraph in the example.
</body>

Notice that we haven't included the paragraph start tag (<p>) for the first paragraph or any end paragraph tags at all in the example; they can be unambiguously inferred by the browser and are therefore unnecessary.

In general, you'll find that human document authors tend to omit postulated tags whenever possible, while automatic document generators tend to insert them. That may be because the software designers didn't want to run the risk of having their product chided by competitors as not adhering to the HTML standard, even though we're splitting letter-of-the-law hairs here. Go ahead and be defiant: omit that first paragraph's <p> tag and don't give a second thought to paragraph ending </p> tags, provided, of course, that your document's structure and clarity are not compromised.

Paragraph rendering

When encountering a new paragraph (<p>) tag, a browser typically inserts one blank line plus some extra vertical space into the document before starting the new paragraph. The browser then collects all the words and, if present, inline images into the new paragraph, ignoring leading and trailing spaces (not spaces between words, of course) and return characters in the HTML text. The browser software then flows the resulting sequence of words and images into a paragraph that fits within the margins of its display window, automatically generating line breaks as needed to wrap the text within the window. For example, compare how a browser arranges the text into lines and paragraphs (Figure 4.1) to how the preceding HTML example is printed on the page. The browser may also automatically hyphenate long words, and the paragraph may be full-justified to stretch the line of words out towards both margins.

Figure 4.1: Browsers ignore common return characters in the source HTML document

[Graphic: Figure 4-1]

The net result is that you do not have to worry about line length, word wrap, and line breaks when composing your HTML documents. The browser will take any arbitrary sequence of words and images and display a nicely formatted paragraph.

If you want to control line length and breaks explicitly, consider using a preformatted text block with the <pre> tag. If you need to force a line break, use the <br> tag. [<pre>: the section called "The <pre> Tag"] [<br>: the section called "The <br> Tag"]

The align attribute

Most browsers automatically left-justify a new paragraph. To change this behavior, HTML 3.2 gives you the align attribute for the <p> tag and provides three kinds of content justification: left, right, or center.

Figure 4.2 shows you the effect of each alignment, as rendered from the following source:

<p align=right>
Right over here!
<br>
This is too. 
<p align=left>
Slide back left. 
<p align=center>
Smack in the middle. 
</p>
Left's the default.

Figure 4.2: Effect of the align attribute on paragraph justification (Netscape 2.0)

[Graphic: Figure 4-2]

Notice in the example that the paragraph alignment remains in effect until the browser encounters another <p> tag or an ending </p> tag (we deliberately left out a final <p> tag in the example to illustrate the effects of the </p> end tag on paragraph justification). Other body elements may also disrupt the current paragraph alignment and cause subsequent paragraphs to revert to the default left alignment, including forms, headers, tables, and most other body content-related tags.

The style and class attributes

Use the style attribute with the <p> tag to create an inline style for the paragraph's contents. The class attribute lets you label the paragraph with a name that refers to a predefined class of the <p> tag declared in some document-level or externally defined style sheet. And, class-identified paragraphs lend themselves well for computer processing of your documents, such as extraction of all paragraphs whose class name is "citation," for example, for automated assembly of a master list of citations. [the section called "Inline Styles: The style Attribute"] [the section called "Style Classes"]

Allowed paragraph content

An HTML paragraph may contain any element allowed in a text flow, including conventional words and punctuation, links (<a>), images (<img>), line breaks (<br>), font changes (<b>, <i>, <tt>, <u>, <strike>, <big>, <small>, <sup>, <sub>, and <font>), and content-based style changes (<cite>, <code>, <dfn>, <em>, <kbd>, <samp>, <strong>, and <var>). If any other element occurs within the paragraph, it implies the paragraph has ended, and the browser assumes the closing </p> tag was not specified.

Allowed paragraph usage

You may specify a paragraph only within a block, along with other paragraphs, lists, forms, and preformatted text. In general, this means that paragraphs can appear where a flow of text is appropriate, such as in the body of a document, an element in a list, and so on. Technically, paragraphs cannot appear within a header, anchor, or other element whose content is strictly text-only. In practice, most browsers ignore this restriction and format the paragraph as a part of the containing element.