1. Home
  2. Computing & Technology
  3. Web Design / HTML

Line Breaks and Paragraphs

Using the
and

Tags

By Jennifer Kyrnin, About.com

Space on a Web site would seem to be a fairly simple thing. But the first time you try hitting the <<ENTER>> key several times and having that information not appear on your page, you will realize that it's not as easy as it looks.

There are several ways to create space on a Web site. The first two are with HTML tags:

<p>...</p>

The paragraph marker will usually put a space between items. It acts as a paragraph break. However, several <p>'s in a row will do nothing other than clutter up your page. Some editors will put <p> </p> in places to add more space, but this really isn't using the <p> tag, but rather the   character, which I'll get to in a minute.
More about the <p> tag.

<br />

The <br> tag is meant to put just a single line break in the flow of the text. However it can be used multiple times in a row to create long strings of blank space. The problem is, you can't define the height and width of the space, and it is automatically the width of the page.
More about the <br> tag.

Single Pixel Images

Then David Siegel came up with the "Single Pixel GIF Trick". This involves using a transparent, 1x1 pixel image and sizing it to get exactly the amount of white space you need. The advantage to this is that it's very flexible. But if, for some reason, the images don't download, you could have a page that is very difficult to read, as the broken image icons would get in the way.

The Non-Breaking Space ( )

Finally, there is the non-breaking space. This character entity acts exactly like a normal text space would, except that the browser treats each one individually. If you put four in a row,    the browser will put four spaces in the text.
Note, older browsers may not render multiple non-breaking spaces.

Using Non-Breaking Spaces in Tables

Tables will often close or break if you do not include something in the cell to hold it open. For example: Use the following HTML to create a table with a 30 pixel gutter:

<table border="0">
<tr><td width="30"></td>
<td>
There should be a small amount of space to the left of this text. Some browsers will display it properly, but many will ignore the table width request and put the text flush with the left margin. Very annoying!
</td></tr>
</table>

To keep the table column from breaking, use a non-breaking space:

<table border="0">
<tr><td width="30"> </td>
<td>
There should be a small amount of space to the left of this text. With the   most browsers will display it properly.
</td></tr>
</table>

Previous Features

Explore Web Design / HTML

More from About.com

  1. Home
  2. Computing & Technology
  3. Web Design / HTML
  4. About.com Web Design A to Z
  5. Web Design Articles I-Q
  6. Web Design/HTML Articles M
  7. Line Breaks and Paragraphs: Using the P and BR Tags in HTML

©2008 About.com, a part of The New York Times Company.

All rights reserved.