HTML Paragraphs

Paragraphs, line breaks, rules and preformatted text.

✍️ 3 exercises + code challenge in this lesson

❮ Previous Next ❯

The <p> element defines a paragraph. Browsers add space above and below each paragraph automatically.

Whitespace is collapsed

Extra spaces and line breaks in your source code are shown as a single space. To force a new line, use <br>.

Horizontal rules

<hr> draws a horizontal line to separate sections of content.

Preformatted text

<pre> keeps spaces and line breaks exactly as written and uses a fixed-width font. It is useful for poems and code.

Key Takeaways: HTML Paragraphs

Mastering HTML Paragraphs helps you write clean and reliable HTML code. Follow standard conventions, test edge cases, and keep logic simple. Try running the code example below and complete the exercises to build confidence.

HTML Paragraphs Code Example

HTML

<p>This paragraph
   has extra    spaces
   that the browser ignores.</p>

<p>Line one<br>Line two<br>Line three</p>
<hr>
<pre>
  Text inside pre
     keeps    its spacing.
</pre>

Free sign-in required · Google login available

HTML Paragraphs Practice Exercises

Check what you learned in “HTML Paragraphs”.

/ 3 solved

Fill in the blank

Insert a line break between the two lines.

<p>Line oneLine two</p>

✓ Correct! Not quite. Try again.

Multiple choice

Which element keeps spaces and line breaks exactly as written?

✓ Correct! Not quite. Try again.

Code challenge

Add a horizontal rule (<hr>) between the two paragraphs.

Write the code in the live editor. Your answer is checked automatically.

Free sign-in required · Google login available

to save your exercise progress.

Finished this lesson?

Mark it complete to track your progress.

Stuck on something?

Ask the community in the CodesInTech forum.

Need a developer?

Learning on your own is great — and when you need professional help, our team builds custom software, websites and mobile apps for clients worldwide.

Explore Our Services