By Mark R. Brown and Robert Meegan
Your old English teacher taught you to break your writing up into paragraphs that expressed complete thoughts, and an HTML document shouldn't be an exception. Unfortunately, line and paragraph breaks are a little more complicated in HTML than you might expect.
As a markup language, HTML requires that you make no assumptions about your reader's machine. Your document's readers can set whatever margins and fonts they want to use. This means that text wrapping must be determined by the viewer software, as it is the only part of the system that knows about the reader's setup. Line feeds in the original document are ignored by the viewer, which then reformats the text to fit the context. This means that a document that's perfectly legible in your editor (see Figure 5.1) is badly mashed together in the viewer, as shown in Figure 5.2.
FIG. 5.1
Line feeds separate the paragraphs in the editor.
NOTE: Different viewers display the same pages in different ways, depending on their default settings and user options. In this chapter, we've used examples from different browsers to mix things up a bit.
FIG. 5.2
The viewer ignores the line feeds and runs the text together.
The proper way to break text into paragraphs is by using paragraph elements. Place a paragraph start tag, <P>, at the beginning of each new paragraph, and the viewer knows to separate the paragraphs. Adding a paragraph end tag, </P>, is optional, as it is normally implied by the next start tag that comes along. Still, adding the </P> tag at the end of a paragraph can help to protect your documents against viewers that don't precisely follow the HTML standard.
NOTE: Seriously consider using the beginning and ending paragraph tags. As style elements, which give you more control over the <P> tag, become more prevalent, this syntax becomes more important.
Figure 5.3 shows what the document looks like in the editor after the paragraph tags have been added. You can see the tags were added to the start of each paragraph and that the line feeds are still in the document. Because the viewer ignores the line feeds anyway, it is best to keep them in the source document to make it easier to edit later.
When you look at the document in Figure 5.4, you can see the viewer separated the paragraphs correctly by adding a double-spaced line between them.
NOTE: In some HTML documents, you see a paragraph start tag, <P>, used repeatedly to create additional white space. This is not supported in HTML, and most current viewers will ignore all of the <P> tags after the first one.
The paragraph element has one attribute that is supported by both Netscape Navigator and Microsoft Internet Explorer. This is the ALIGN attribute. The possible values for the ALIGN attribute and their functions are listed in Table 5.1. The default value, if the ALIGN attribute is not used, is for left alignment.
NOTE: The ALIGN attribute can also be used with many other HTML tags to align graphics, table contents, and other page elements. Its use in these contexts will be discussed in following chapters.
FIG. 5.3
If you want to separate paragraphs, use the <P> tag.
FIG. 5.4
With paragraph elements, the text becomes much easier to read.
| Attribute | Function |
| LEFT | Aligns the text with the left margin of the viewer. The right edge is ragged. |
| CENTER | Centers the text between the viewer margins. |
| RIGHT | Aligns the text with the right margin of the viewer. The left edge is ragged. |
As you have seen, HTML does all of the formatting at the viewing software rather than at the source. This has the advantage of device independence. But what do you do if you have a reason to break up a line of text at a certain point?
Use the line break tag, <BR>, to end a line where you want. This forces the viewer to start a new line, regardless of the position in the current line. Unlike the paragraph element, the line break does not double space the text. Because the line break element is not a container, it does not have an end tag.
One reason you might want to force line breaks is to show off your poetic muse, as shown in Listing 5.1.
<HTML> <HEAD> <TITLE>Creating an HTML Document</TITLE> </HEAD> <BODY> <P>A very intelligent turtle<BR> Found programming UNIX a hurdle<BR> The system, you see,<BR> Ran as slow as did he,<BR> And that's not saying much for the turtle.<BR> <CITE>Mercifully anonymous</CITE> </BODY> </HTML>
When this source is viewed in Figure 5.5, you can see how the line break element works.
CAUTION: You might think you can use multiple line breaks to provide extra white space in your document. Some browsers condense multiple line breaks (multiple <BR> or <P> tags) to a single line break, however.
FIG. 5.5
Use line breaks to force a new line in the viewer.
You need to be careful when using line breaks; if the line has already wrapped in the viewer, your break may appear after only a couple of words in the next line. This is particularly the case if the viewer you test your documents on has wider margins than your reader's viewer. Figure 5.6 shows an example in which the author saw that the break was occurring in the middle of the quotation, so she added a <BR>. Unfortunately, when displayed on a screen with different margins, the word "actually" ends up on a line by itself.
Just as there are instances in which it is convenient to break a line at a specified point, there are also times when you would like to avoid breaking a line at a certain point. Any text between a <NOBR> start tag and the associated end tag is guaranteed not to break across lines.
NOTE: This can be very useful for items such as addresses, where an unfortunate line break can cause unexpected results. Don't overuse the <NOBR> element, however. Text can look very strange when the natural line breaks have been changed.
TIP: If you think you might need a break inside a <NOBR> element, you can suggest a breaking point with a <WBR> tag (soft line break). The viewer will only use the <WBR> if it needs it.
FIG. 5.6
Careless use of line breaks can produce an unexpected result.
So far, your HTML document probably looks a little dull. To make it more interesting, the first thing you need to do is add a little more structure to it. Web users want to be able to quickly scan a document to determine whether or not it has the information they are looking for. The way to make this scanning easier is to break the document up into logical sections, each covering a single topic.
After you have broken up the document, the next step is to add meaningful headers to each section, enabling your reader to quickly jump to the material of interest.
Headings in HTML provide an outline of the text that forms the body of the document. As such, they direct the reader through the document and make your information more interesting and usable. They are probably the most commonly used formatting tag found in HTML documents.
The heading element is a container and must have a start tag (<H1>) and an end tag (</H1>). HTML has six levels of headings: H1 (the most important), H2, H3, H4, H5, H6 (the least important). Each of these levels has its own appearance in the reader's viewer, but you have no direct control over what that appearance is. This is part of the HTML philosophy: You, as the document writer, have the responsibility for the content, while the viewer has the responsibility for the appearance. See the example in Listing 5.2. (See Chapter 17, "Applying Cascading Style Sheets," to learn more about using style sheets to change text properties for tags such as <H1>.)
<HTML> <HEAD> <TITLE>Creating an HTML Document</TITLE> </HEAD> <BODY> <H1>Level 1 Heading</H1> <H2>Level 2 Heading</H2> <H3>Level 3 Heading</H3> <H4>Level 4 Heading</H4> <H5>Level 5 Heading</H5> <H6>Level 6 Heading</H6> </BODY> </HTML>
NOTE: Although it is not absolutely necessary to use each of the heading levels, as a matter of good practice you should not skip levels because it may cause problems with automatic document converters. In particular, as new Web indexes come online, they will be able to search Web documents and create retrievable outlines. These outlines may be confusing if heading levels are missing.
Figure 5.7 shows how these headings look when they are displayed in Microsoft Internet Explorer.
FIG. 5.7
Here are the six heading levels as they appear in Internet Explorer.
NOTE: Remember that forgetting to add an end tag definitely messes up the appearance of your document. Headings are containers and require both start and end tags. Another thing to remember is that headings also have an implied paragraph break before and after each one. You can't apply a heading to text in the middle of a paragraph to change the size or font. The result is a paragraph broken into three separate pieces, with the middle paragraph in a heading format.
The best way to use headings is to consider them the outline for your document. Figure 5.8 shows a document in which each level of heading represents a new level of detail. Generally, it is good practice to use a new level whenever you have two to four items of equal importance. If more than four items are of the same importance under a parent heading, however, try breaking them into two different parent headings.
FIG. 5.8
Headings provide a document outline.
Headings can use the ALIGN attribute, just as the <P> tag does. This is important to remember, because not all viewers show all headings left-aligned. Figure 5.9 shows the use of the ALIGN attribute in a heading.
Another method for adding divisions to your documents is the use of horizontal lines. These provide a strong visual break between sections and are especially useful for separating the various parts of your document. Many viewers use an etched line that presents a crisp look and adds visual depth to the document.
FIG. 5.9
Headings can be aligned on the left, right, or in the center.
You can create a horizontal line using the horizontal rule element, <HR>. This tag draws a shaded, horizontal line across the viewer's display. The <HR> tag is not a container and does not require an end tag. There is an implied paragraph break before and after a horizontal rule.
Listing 5.3 shows how horizontal rule tags are used, and Figure 5.10 demonstrates their appearance in the Netscape Navigator viewer.
<HTML> <HEAD> <TITLE>Manned Space Craft</TITLE> </HEAD> <BODY> <H1 ALIGN=CENTER>Manned Space Craft</H1> <BR> <H2 ALIGN=LEFT>Soviet</H2> Vostok<BR> Voskhod<BR> Soyuz<BR> <HR> <H2 ALIGN=LEFT>American</H2> Mercury<BR> Gemini<BR> Apollo<BR> Shuttle<BR> <HR > </BODY> </HTML>
FIG. 5.10
Most viewers interpret the <HR> tag as an etched line.
Table 5.2 lists the attributes of the <HR> tag. Listing 5.4 is similar to Listing 5.3, but shows how some of the attributes are used. Figure 5.11 shows the results as seen in Internet Explorer.
<HTML> <HEAD> <TITLE>Manned Space Craft</TITLE> </HEAD> <BODY> <H1 ALIGN=CENTER>Manned Space Craft</H1> <BR> <H2 ALIGN=LEFT>Soviet</H2> Vostok<BR> Voskhod<BR> Soyuz<BR> <HR WIDTH=50% SIZE=6 ALIGN=LEFT COLOR=RED> <H2 ALIGN=LEFT>American</H2> Mercury<BR> Gemini<BR> Apollo<BR> Shuttle<BR> <HR WIDTH=50% SIZE=6 ALIGN=LEFT COLOR=NAVY> </BODY> </HTML>
| Attribute | Function |
| ALIGN | Can be set to LEFT, CENTER, or RIGHT. |
| WIDTH | Can be entered in pixels or as a percentage of the viewer window width. If a percentage is desired, add a percent time to the number. |
| SIZE | The height of the ruled line in pixels. |
| NOSHADE | If this attribute is present, the viewer does not use a three-dimensional effect. |
| COLOR | Specifies the color of the ruled line. An RGB hexadecimal value or a standard color name can be used. |
FIG. 5.11
The attributes of the <HR> tag can make the rules more attractive.
TIP: Documents created using early versions of HTML often used a graphic image to provide a more colorful and obvious break. Of course, these would not appear in viewers that had image loading turned off. Even if the viewer were loading images, a color bar was another file that had to be copied and maintained. The new <HR> attributes allow you much more flexibility in the creation of your documents at virtually no loss of speed or ease of maintenance.
Horizontal rules should be reserved for instances when you want to represent a strong break in the flow of the text. Some basic guidelines for adding rules is that they should never come between a heading and the text that follows the heading. They should also not be used to create white space in your document. White space--places where no content appears--is important to controlling the look and feel of your pages. Too much white space and your pages appear barren; too little and they appear crowded.
Is it absolutely necessary to use paragraph and line break elements for formatting text? Well, not really; HTML provides a container that can hold preformatted text. This is text that gives you, the author, much more control over how the viewer displays your document. The trade-off for this control is a loss of flexibility.
The most common and useful preformatting tag is the <PRE> container. Text in a <PRE> container is basically free-form with line feeds causing the line to break at the beginning of the next clear line. Line break tags and paragraph tags are also supported. This versatility enables you to create such items as tables and precise columns of text. Another common use of the <PRE> element is to display large blocks of computer code (C, C++, and so on) that would otherwise be difficult to read if the browser reformatted it.
Text in a <PRE> container can use any of the physical or logical text formatting elements. You can use this feature to create tables that have bold headers or italicized values. However, the use of paragraph-formatting elements such as <Address> or any of the heading elements is not permitted. Anchor elements can be included within a <PRE> container.
The biggest drawback to the <PRE> container is that any text within it is displayed in a monospaced font in the reader's viewer. This tends to make long stretches of preformatted text look clunky and out of place.
Figure 5.12 shows an example of some preformatted text in an editor. You can use the editor to line up the columns neatly before adding the character-formatting tags. The result of this document is shown in Figure 5.13.
TIP: If you are not converting existing documents, the HTML tables are much more attractive than are those you can create by using the <PRE> element. See Chapter 11, "Formatting Content with Tables," for more information on this topic.
CAUTION: Tab characters move the cursor to the next position, which is an integer multiple of eight. The official HTML specification recommends that tab characters not be used in preformatted text because they are not supported in the same way by all viewers. Spaces should be used for aligning columns.
FIG. 5.12
Preformatted text can be used to line up columns of numbers.
FIG. 5.13
A preformatted table can be used in a document.
NOTE: There are other preformatted container classes, but these have been declared as obsolete. The <XMP> and <LISTING> elements give you the capability to create text that is already laid out. There are some disadvantages to these in that other HTML elements are not permitted inside of them. Viewers are not allowed to recognize any markup tags except the end tag. Unfortunately, many viewers don't comply with this standard properly, and the results can be unpleasant.
The difference between the two elements are that <XMP> text must be rendered in a font size that permits at least 80 characters on a line and <LISTING> requires a font that permits 132 characters.
You should avoid using the <XMP> and <LISTING> elements unless it is absolutely necessary. Because they have been declared obsolete, viewers are not required to support them any longer. You will be more certain of what your readers are seeing if you use the <PRE> element instead.
NOTE: If you want to show actual HTML code in a preformatted section, or you want to use the < or > characters, you need to use the < and > entity codes, like this: <PRE>.
The <DIV></DIV> container (DIV stands for division) can be used to enclose and define the alignment for an entire block of page elements. It supports the ALIGN attribute, so you could use it to align a block of text and graphics to CENTER, as in this example:
<DIV ALIGN=CENTER> <H1>This header is centered.</H1> <IMG SOURCE="somepic.gif"><BR> So are the images above and this line of text.<BR> <P ALIGN=RIGHT>But this text is right-aligned.</P> </DIV
Note that all the elements between the <DIV> and </DIV> tags are aligned according to the definition given by the <DIV> tag, except for any elements which have their own alignments defined. As is always the case with the ALIGN attribute, it can assume the values LEFT, CENTER, or RIGHT.
You can also use inline styles with the <DIV> tag to set the style for an entire block of HTML within your document. This works because of the concept of inheritance. For example, if you want to change the text color of an entire block of tags to blue, you can put those tags in the DIV container and define a style for the <DIV> tag that sets the text color to blue. It looks like this:
<DIV STYLE="color: blue"> <H1>This is a heading</H1> <P>This is a paragraph. It will look blue in the user's browser</P> </DIV>
The DIV tag is also an important part of advanced page layout using Cascading Style Sheets, and will be discussed in that context in Chapters 17 and 18.
Understanding the HTML tags that you can use is a different matter than understanding how to use them effectively. Thus, here are a few tips that you should consider when using the tags you learned about in this chapter:
Using what you've learned in this chapter, you can create a more sophisticated template. Now you can use some of this chapter's features to build a template that can be used for glossaries and related documents.
The first step is to bring the existing template into your editor. Once you've loaded it, you can make the appropriate changes to the elements that are already present. These can be seen in Listing 5.5.
<HTML> <HEAD> <TITLE>Glossary</TITLE> <HEAD> <BODY BACKGROUND="greybg.jpg" BGCOLOR="GRAY", TEXT="BLACK", LINK="BLUE", ALINK="GREEN", VLINK="RED"> <ADDRESS>Created by Author<BR> Created on Date</ADDRESS> </BODY> </HTML>
Now you can add a title to the page and bracket the text with some horizontal rules. The terms are defined as level-two headings, left-aligned, and that the definitions themselves will be normal text. These decisions lead to Listing 5.6, which is a template that can now be saved and used anytime you need a glossary document. This same template would also work for a phone list or a catalog.
<HTML> <HEAD> <TITLE>Glossary</TITLE> <HEAD> <BODY BACKGROUND="greybg.jpg" BGCOLOR="GRAY", TEXT="BLACK", LINK="BLUE", ALINK="GREEN", VLINK="RED"> <H1 ALIGN=CENTER>Glossary</H1> <HR ALIGN=CENTER WIDTH=50% SIZE=5 COLOR=NAVY> <H2 ALIGN=LEFT>Term 1</H2> Type the definition for term 1 here. <H2 ALIGN=LEFT>Term 2</H2> Type the definition for term 2 here. And so on... <HR ALIGN=CENTER WIDTH=50% SIZE=5 COLOR=NAVY> <ADDRESS>Created by Author<BR> Created on Date</ADDRESS> </BODY> </HTML>
An example of how this template could be used is shown in Figure 5.14.
FIG. 5.14
This is an example using the glossary template.
© Copyright, Macmillan Computer Publishing. All rights reserved.