Spacing Out

As we noted in an earlier chapter, the whitespace characters, including the Enter key, will not work in HTML. So, how do you create new lines or paragraphs?

There are two standard tags for this: <br /> and <p>.

Breaking lines

The first command, <br />, is called a line break (therefore "br," for "break"). Remember, because it does not have an ending tag, we put the slash at the end of the single tag, after the command.

The <br /> tag is simple: it just breaks the line, sending you to the beginning of the next line. There is no line spacing. If you use a single <br /> tag at the end of each sentence, for example, it will appear to be single-spaced text, as below:

What you type How it appears
Here is one line of text.<br />
Here is another one.<br />
And another!<br />
And let's try just one more.
Here is one line of text.
Here is another one.
And another!
And let's try just one more.
Paragraphs

The <p> tag, on the other hand, differs in three ways: first, it usually requires a beginning and an ending tag; second, it often takes attributes (especially the "align" attribute); and third, a creates just slightly less than a double-space between lines. The spacing is to separate paragraphs from each other, because plain HTML does not allow for first-line indents.

What you type How it appears
<p>Here is one line of text.</p>
<p>Here is another one.</p>
<p>And another!</p>
<p>And let's try just one more.</p>

Here is one line of text.

Here is another one.

And another!

And let's try just one more.

Repeating

There is one more difference between the two commands: the <br /> tag can be repeated, while the <p> tag cannot. If you repeat the <br /> tag five times, for example, you will create five lines of blank space. If you repeat the <p> tag five times without any text between the tags, then only the first <p> tag set will have an effect.

Go ahead, try it out.

PRE

Finally, the have the <pre> tag. "Pre" stands for "preformatted." It usually means that the text inside the tags will be in the Courier monospace"Monospace" means that all characters are the same width. Most Asian fonts are monospace. font, and all whitespace characters will be shown--like this:

What you type How it appears
<pre>Here is some text.

There are        many spaces inside!


Wow!</pre>
Here is some text.

There are        many spaces inside!
		
		
Wow!

Go ahead and try the <pre> tag out on the exercise below. Add the tag to the whole text, and see how it changes.



HTML tags you should know by now:
  • <html>
  • <head>
  • <title>
  • <body>
  • <b>
  • <strong>
  • <i>
  • <em>
  • <big>
  • <small>
  • <font>
  • <br />
  • <p>
  • <pre>
 



 



Video Review