HTML Paragraphs

The <p> tag defines a paragraph. A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph.

HTML Paragraphs Example

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

HTML Display

You cannot be sure how HTML will be displayed. Large or small screens, and resized windows will create different results. With HTML, you cannot change the output by adding extra spaces or extra lines in your HTML code.

The browser will remove any extra spaces and extra lines when the page is displayed:

<p>
This paragraph
contains a lot of lines
in the source code,
but the browser 
ignores them.
</p>

<p>
This paragraph
contains         a lot of spaces
in the source         code,
but the        browser 
ignores them.
</p>

Don't Forget the End Tag

Most browsers will display HTML correctly even if you forget the end tag:

<p>This is a paragraph
<p>This is another paragraph

The example above will work in most browsers, but do not rely on it. Forgetting the end tag can produce unexpected results or errors.

HTML Line Breaks

The <br> tag inserts a line break. Use <br> when you want to break a line, but don't want to start a new paragraph.

<p>This is<br>a paragraph<br>with line breaks.</p>

The Poem Problem

The <br> element is useful for writing addresses or poems where the line breaks are important.

<p>
The quick brown fox<br>
jumps over the lazy dog.<br>
The rain in Spain<br>
falls mainly on the plain.
</p>

HTML <pre> Element

The <pre> element defines preformatted text. The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks.

<pre>
The quick brown fox
jumps over the lazy dog.
The rain in Spain
falls mainly on the plain.
</pre>