br Creating Line Breaks

Creating Line Breaks

The   element is an empty element that inserts a line break into text. Because this element is empty, you use it like this in XHTML:   . This element is supported in XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, and XHTML 1.1. Here are the attributes of this element:

class Gives the style class of the element. (XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1.)
clear Used to move images or other elements that were aligned in the past. Set to none (the defaultjust a normal break), left (breaks line and moves down until there is a clear left margin past the aligned element), right (breaks line and moves down until there is a clear right margin past the aligned element), or all (breaks line and moves down until both margins are clear of the aligned element). (XHTML 1.0 Transitional, XHTML 1.0 Frameset.)
id Refers to the element; set this attribute to a unique identifier. (XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1.)
style Set to an inline style to specify how the browser should display the element. (XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1.)
title Contains the title of the element (which might be displayed in ToolTips). (XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1.)

This element does not support any XHTML events.

You use the   element to arrange the text in a document by adding a line break, making the browser skip to the next text line.

This element is an empty element, so you use it like this:   . This usage actually does not cause any problems in the major browsers, and the fact that those browsers are able to handle empty elements with the usual XML /> closing characters is one of the reasons that XHTML actually works as it should in HTML browsers. In fact, you can also insert line breaks as   , but that usage is confusing to some browsers and XML validators.

Here's an example; in this case, I'm using   elements to introduce line breaks and a  element to create a new paragraph:

Listing ch16_11.html

 <?xml version="1.0"?> <!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" xml:lang="en" lang="en">     <head>         <title>             Using the &lt;br&gt; and &lt;p&gt; Elements         </title>     </head>     <body>         <center>             <h1>                 Using the &lt;br&gt; and &lt;p&gt; Elements             </h1>         </center>  This is a line of text.   <br />   Using a line break skips to the next line.   <p style="font-weight: bold">   This is a line of bold text in a paragraph.   <br />   Here's a new line of text in the same paragraph.   </p>  </body> </html>

The results of this code appear in Figure 16-9. As you can see, inserting a   element makes the browser move to the next line of text.

Figure 16-9. Using line breaks and paragraphs in Netscape Navigator.

graphics/16fig09.gif

Let the Browser Handle the Formatting

Ideally, you should let the browser handle text formatting as much as possible. The text flow is supposed to be handled by the browser to display that text as best as possible to fit the display area. If you add a lot of line breaks, you may interfere with the best possible display (unless you're adding line breaks to specifically separate discrete elements, such as images). It's usually best to format your text into paragraphs that the browser can handle appropriately rather than expressly adding line breaks to text yourself.