Line Breaks and Paragraphs

Unlike text editors, browsers do not display the carriage returns (created by pressing the Enter key) that you enter into your source code. A carriage return merely creates a single space. Browsers also display a continuous series of blank spaces as just one space. If you typed the following two lines in your web page source code:

It is wise to taste a great      diversity of thought,
just be careful of what you swallow.

...a browser would display it like this:

It is wise to taste a great diversity of thought, just be careful of what you swallow.

As you can see, the extra spaces between the words great and diversity are reduced to one space, and the second line didn't wrap to the next line until it ran out of horizontal space. If I had made this column a little wider it would have all been on one line. The browser will not start a new line of text until you either code a new line into your source file, or the text reaches the end of the horizontal space available, at which point it wraps to the next line.

So the thing you need to know first is how to tell the browser to start a new line. Amazing how I know just what you need to know, eh Mrs. Whifflebottom?

There are two basic tags used to create line breaks. One creates a single line break; the other creates a double line break. The tag for a single line break is called, appropriately enough, a break tag. It is coded like this:

<br />

The break tag is one of the so-called empty tags, which simply means it doesn't have a corresponding closing tag. You can also code it like this:

<br>

...and the results will be the same. The first example is XHTML compliant, the second is not. You may use either for HTML pages.

Note: To be compliant with XHTML, one must now add the space and forward slash to the end of any empty tag to make it self-closing. The XHTML Primer at my new members site provides more instruction on empty tags, as well as much more information about XHTML itself.

The paragraph tag creates two line breaks. Text following a paragraph tag will drop down two lines, leaving an empty line in between the lines that precede and follow the paragraph tag. A paragraph tag is written as follows:

<p>

From a technical standpoint, a closing paragraph tag is optional, but to be XHTML compliant you must use the closing tag. I recommend using the closing tag for HTML as well in the event it's made mandatory in a future version. Here's an example of using the closing tag:

<p> ...paragraph of text goes here... </p>

Gee, this stuff sure is easy. You only need to learn more little bits and pieces of code like this to do more stuff, and the more learn, the more you can do!

Back | Web Design Tutorials Index

Almost a Newsletter

Changing list hosts. Will post a new subscribe form shortly.

Did you know...

The member's site has about 100 standards compliant HTML and CSS tutorials, 31 handy reference charts, reprintable content, web graphics, exclusive fonts, free software, free ebooks and more? All this for less than 9 cents a day! [ Details ]