How to Control Line Breaks
Sometimes you want to start a new line of text, but you don't want to include a paragraph break. A good example of this is when you are typing out the lyrics of a song. You want each line of the verse to be on a separate line in your document, but you only want a paragraph break between the last line of the first verse and the first line of the second verse. This task shows you how to create this type of line break. Part 3, "Working with Paragraphs," explains the various ways of creating paragraph breaks.
Achieving Closure
The line break tag is the first of several tags that have no closing tag in HTML. This is because unlike other tags, it doesn't affect a specific range of text. That is, nothing "goes between" the tag in the way that text goes between the <font> and </font> tags.
You could get away with never closing those line break tags, and you'd be writing perfectly acceptable HTML. But recall that one of my goals in this book is to prepare you for the future of Web technology, XHTML. No two ways about it, you must close every tag you use in XHTML.
Adding the closing part of the line break tag does not affect your HTML in any way. But it makes all the difference in the world to XHTML. In addition, it is easy to close the tag—even easier than the normal method. Therefore, there really is no reason not to get into the habit now. Remember, we all need closure!
Add a Few Lines of Text
Add the Line Break Tag
Add the clear Attribute
Test the Page
To create a line break on your Web page, first type several sentences in your text editor. Don't worry about the length of your lines, just go ahead and type.
<html> <head> <title>Adding Line Breaks</title> </head> <body> <font size="2" face="arial, helvetica"> Here I am going to demonstrate line breaks. Notice that the text I type does not break until it reaches the edge of the browser window. It does not matter how I type it into my text editor, or where my text editor breaks the lines. Only when I add HTML line breaks can I control where the line breaks occur. </font> </body> </html>
To create a line break, type <br /> (br, a space, and a forward slash). The space and forward slash are the special closing portion of the line break tag. Now type a few more sentences.
<body> <font size="2" face="arial, helvetica"> Here I am going to demonstrate line breaks.<br /> Notice that the text I type does not break until<br /> it reaches the edge of the browser window.<br /> It does not matter how I type it into my text<br /> editor, or where my text editor breaks the lines.<br /> Only when I add HTML line breaks can I control where the line breaks occur. </font> </body>
In Part 5, "Implementing Web Graphics," Task 5, "How to Align Graphics to Text," you'll learn how to wrap text around images that you include in your HTML. You can use the clear attribute of the line break tag to override the specified text wrap. To use the clear attribute, type <br clear />. You'll see how this works in Part 5. Notice that the clear attribute is different from other attributes we've used in that it does not require a value.
<body> <font size="2" face="arial, helvetica"> Only when I add HTML line breaks can I control where the line breaks occur.<br /> I can also add the clear attribute to a line break<br clear /> to override the wrap around an image on my page.<br /> You'll learn more about that later. </font> </body>
Now that you've added line breaks, save your page and open it in your test browser. Notice that the line breaks cause the browser to move to the next line before showing the text that comes next. Also notice that the line break does not cause a paragraph break. It merely moves the text down to the next line without inserting additional space. (see figure 2.6)
){kind=link}