Paragraphs and Breaks | HTML & XHTML: The Complete Reference (Osborne Complete Reference Series)

< Day Day Up >

Recall that white space handling rules of HTML suggest that multiple spaces, tabs, and carriage returns are often ignored. Word wrapping can occur at any point in your source file, and multiple white space characters are collapsed into a single space. Instead of relying solely on white space, structural elements are used to section a document. One of the most important structuring elements is the paragraph element. Surrounding text with the  and  tags indicates that the text is a logical paragraph unit. In general, the browser places a blank line or two before the paragraph, but the exact rendering of the text depends on the browser and any applied style sheet. Text within the  tags generally is rendered flush left, with a ragged right margin. Like headings, the align attribute makes it possible to specify a left , right , or center alignment. Since HTML 4.0, you also can set an align value of justify , to justify all text in the paragraph. Due to the poor quality of justification in some browsers, this value is used only rarely. The following example in XHTML 1.0 transitional shows four paragraphs with alignment, the rendering of which is shown in Figure 3-2:

Figure 3-2: Rendering of the paragraph example

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html> xmlns="http://www.w3.org/1999/shtml" lang="en">   <head>   <title>  Heading Alignment Example  </title>   <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />   </head>   <body>   <p>  This is the first paragraph in the example about the P tag.  There really isn't much to say here.  </p>   <p align="center">  This is the second paragraph. Again, more of the same. This time the paragraph is aligned to the center. This might not be such a good idea as it often makes the text hard to read.  </p>   <p align="right">  Here the paragraph is aligned to the right. Right aligned text is also troublesome to read. The rest of the text of this paragraph is of little importance.  </p>   <p align="justify">  Under HTML 4.0 compliant browsers, you are able to justify text. As you may notice, the way browsers tend to justify text is sometimes imprecise. Furthermore, some older  browsers do not support this attribute value.  </p>   </body>   </html>

Because under its default rendering the paragraph element causes a blank line, some HTML authors attempt to insert blank lines into a document by using multiple  tags. This rarely results in the desired outcome. The browser will collapse empty  tags because they have no contents and thus desired formatting may not be achieved. To get around this problem, many WYSIWYG HTML editors and even some by-hand HTML authors use a nonbreaking space character within a paragraph, to keep the element from collapsing, as shown here:   . This approach isn't recommended because it doesn't reduce markup used and further obscures the meaning of the document. A break should be used instead.

To insert returns or blank lines in an HTML or XHTML document, the   tag is used. This tag inserts a single carriage return or line break into a document. It is an empty element ”thus, it has no close tag. Because of this, under XHTML you would use   instead of just plain   . In addition to the core attributes, the one attribute commonly used with a   tag is clear . This attribute controls how text flows around images or embedded objects. The use of   in this fashion is discussed in Chapter 5.

The following code fragment shows the basic uses of p and br , and also shows that the two elements are really not equivalent, despite their physical rendering similarities (a screen rendering appears in Figure 3-3):

Figure 3-3: Rendering of break and paragraph example

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml" lang="en">   <head>   <title>  Break and Paragraph Example  </title>   <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />   </head>   <body>   <p>  This is the first paragraph.  <br />  Not much to say here, either. You can use breaks within a paragraph  <br /><br />  like so.  </p>   <p></p><p></p><p></p>   <p>  This is the second paragraph. Notice that the three paragraph  tags that were just used are treated as empty paragraphs and ignored.  </p>   <p>  If you use breaks  </p>   <br /><br /><br /><br />   <p>  you'll get the desired result.  </p>   <p>  Just because using a non-breaking space to force open a paragraph  </p>   <p>&nbsp;</p>   <p>&nbsp;</p>   <p>  works doesn't mean you should use it.  </p>   </body>   </html>

Tip	Users looking for blank lines have to insert multiple <br> tags into their documents. A single <br> tag merely goes to the next line rather than inserting a blank line.

It should be noted that under strict DTDs, the br element is not allowed directly in the body as in the previous example and must be present within a heading ( <h1> - <h6> ),  , <pre> , <div> , or <address> tag. Moving the   tags within the nearest  tag like so

  <p>  If you use breaks  <br /><br /><br /><br /></p>

would allow the document to validate under a strict doctype. Given that many HTML authors still do not use strict HTML or XHTML, the tag continues to be commonly found outside block tags.

< Day Day Up >