BeingXpert Learn & Build Future

7. HTML Paragraphs

What you will learn

  • How to write paragraphs with <p>
  • How browsers treat extra spaces and line breaks
  • When to use <br>, <hr>, and <pre>

The paragraph element

The <p> element holds a block of text. Browsers start each paragraph on a new line and add space above and below it.

Example

<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>

Output

This is the first paragraph.

This is the second paragraph.

Extra spaces and lines are ignored

The browser collapses any run of spaces and line breaks in your code into a single space. This means you can lay out your code neatly without changing the page.

Example

<p>
  This    paragraph
  has extra spaces
  and line breaks in the code.
</p>

Output

This paragraph
has extra spaces
and line breaks in the code.

The text appears on one continuous line, wrapping only when it reaches the edge of its container.

Line breaks with <br>

Use <br> to force a new line inside a paragraph, such as in a poem or an address. It is an empty element, so it has no closing tag.

Example

<p>
  12 Garden Road<br>
  Springfield<br>
  Postcode 12345
</p>

Output

12 Garden Road
Springfield
Postcode 12345

Do not use several <br> tags to create empty space between paragraphs. Use CSS margins instead.

Horizontal line with <hr>

The <hr> element draws a line to show a break between topics.

Example

<p>Chapter one ends here.</p>
<hr>
<p>Chapter two begins here.</p>

Output

Chapter one ends here.

Chapter two begins here.

Preformatted text with <pre>

The <pre> element keeps your spaces and line breaks exactly as typed. Browsers show it in a fixed-width font, so it suits code and text art.

Example

<pre>
Line one
    Line two, indented
Line three
</pre>

Output

Line one
    Line two, indented
Line three

Common mistakes

  • Pressing Enter in the code and expecting a new paragraph on the page.
  • Using <br> instead of separate <p> elements for separate paragraphs.
  • Typing many spaces to indent text. Use CSS for spacing.
  • Writing <br/> and thinking it is required. Plain <br> is fine in HTML5.

Exercise

Write one paragraph that shows these two lines separated by a line break: Roses are red and Violets are blue.

Show solution 
<p>Roses are red<br>Violets are blue</p>

Knowledge check

1. Which element creates a paragraph?

<p>

2. Which element keeps spaces and line breaks exactly as typed?

<pre>

3. Does <br> need a closing tag?

No. It is an empty element.

Summary

  • <p> creates a paragraph.
  • Browsers collapse extra spaces and line breaks in code.
  • <br> breaks a line, <hr> draws a line, and <pre> preserves formatting.

Next lesson: HTML Links.

Scroll to Top