Home > Articles

  • Print
  • + Share This

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!

  1. Add a Few Lines of Text

  2. 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>
  3. Add the Line Break Tag

  4. 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>
  5. Add the clear Attribute

  6. 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>
  7. Test the Page

  8. 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)

  • + Share This
  • 🔖 Save To Your Account

Related Resources

There are currently no related titles. Please check back later.