HTML Cookbook Basic HTML Course

It's Easy!

Alternate version

Tags for this lesson:
Break (or line break): <br />
Paragraph: <p>...</p>

Most pages have some text, so that is where we'll start.

When we are writing an email or a post, we just hit our Return key to get a new line. If we hit it again, we go down another line, ready to start a new paragraph.

When we are writing text for a web page, we can use the Return key to start a new line, but it won't show up that way on your page. You could hit Return a few times and your cursor will go down a few lines, but those blank lines still won't show up on your page.

This is called "white space" and white space gets ignored by all browsers when reading a web page.

The (line) break tag: <br> or <br />
The (line) break is an empty tag. It must be closed with a space and a slash in XHTML.
To show a new line on your page, use <br> for HTML or <br /> for XHTML

To go down several lines, use several break tags.

some words<br /><br /><br />more words

will appear as

some words


more words

The break tag can be used anywhere that you want the next thing on a new line. For example <br />'s are a good way to separate images with a few lines of blank space.


Now let's talk about paragraphs. Many of us were taught that you can use <p> to start each new paragraph. Many tutorials said you don't need the close ( </p> ) and some said it was wrong to close the <p> tag with </p>.

The correct form is <p>...</p>.

To start a new paragraph, enter <p>. Your paragraph will start two lines down on your page. When you are done, enter </p>.

The next thing in your text will show up 2 lines down on your page, no matter what it is.

Empty paragraphs ( <p></p> ) get ignored. You can not use a bunch of <p> tags to show more than 1 blank line on your page. If you want more than 1 blank line, use <br />'s instead.

some words
<p></p>
<p></p>
<p></p>
some more words
will appear as

some words

some more words

You can a use a break tag in a paragraph.

<p>
Here are some words.
<br />
Here is a new line.
</p>
<p>
Here is a new paragraph.
</p>

will appear as

Here are some words.
Here is a new line.

Here is a new paragraph.

BTW, separating images with paragraph tags is valid. We'll discuss this more when we get to images.

Happy coding!
Gnubee

Links
Tips
Tools
References
Rules
HTML Help Gnubee - Newsgroup
HTML Course Contents (Home)

Valid XHTML 1.0!

Valid CSS!