Most of the text on any web page lives in paragraphs. Articles, product descriptions, blog posts and help pages are mostly made of them.
In this lesson you'll learn the <p> element, how to force a new line with <br>, how to mark a change of topic with <hr>, and why HTML ignores the extra spaces you type. These are small elements, but using them correctly keeps your text readable and your code easy to maintain.
The HTML paragraph element
Wrap each block of text in <p> and </p>. Browsers add a gap above and below every paragraph automatically, so you never need empty lines to space them out.
<p>Cats sleep for around 15 hours a day.</p>
<p>That's about two thirds of their life!</p>A paragraph can contain text and inline elements such as links, bold words and images. It cannot contain block elements such as headings, lists or other paragraphs. If you put a <ul> inside a <p>, the browser closes the paragraph early, which can produce surprising spacing.
How HTML collapses whitespace
Pressing Enter or typing lots of spaces in your code does nothing on the page. The browser turns any run of spaces, tabs and line breaks into a single space.
<p>This text
has lots of gaps.</p>This displays as "This text has lots of gaps." on one line. It can feel annoying at first, but it's actually helpful: you can format your code neatly without changing how the page looks.
Line breaks with br and dividers with hr
<br>forces a new line inside a paragraph. It's the right choice for addresses, poems and song lyrics, where the line breaks are part of the content.<hr>adds a thematic break, which means a change of topic. Browsers draw it as a horizontal line, and you can restyle it with CSS.
Both are void elements, so neither has a closing tag.
Keeping spaces with the pre element
The <pre> (preformatted) element keeps every space and line break exactly as you typed them, and displays the text in a monospace font. It's useful for ASCII art, plain-text tables and blocks of code where the spacing matters.
HTML Paragraph Syntax
Paragraph, break, rule
<p>A paragraph of text.</p>
Line one<br>Line two
<hr>
<pre> keeps spaces </pre>HTML Paragraph Summary
- Wrap each block of text in its own
<p>element. - Browsers collapse multiple spaces and line breaks into one space.
- Use
<br>for line breaks that belong to the content, such as addresses. - Use
<hr>to mark a change of topic. - Use
<pre>when spacing must be kept exactly as typed.
HTML Paragraph Examples
Each example runs in the page. Edit the code and press Run to see what changes.
Whitespace collapsing
Look at the messy spacing in the code, then run it. All that space becomes single spaces.
<p>This paragraph has
lots of spaces
and line breaks in the code.</p>
<p>But it shows up as one tidy line of text.</p>Line-by-line explanation
- Lines 1 to 3The extra spaces and line breaks in the code are collapsed into single spaces.
- Line 4A second paragraph gets its own block with a gap above it.
An address with line breaks
Addresses are one piece of information, so they belong in one element, with <br> for each line.
<h2>Visit us</h2>
<p>
Sprout Bakery<br>
12 Flour Street<br>
Bristol BS1 4XY
</p>
<hr>
<h2>Opening hours</h2>
<p>Tuesday to Sunday, 8am to 4pm.</p>Line-by-line explanation
- Lines 3 to 5Each
<br>starts a new line without starting a new paragraph. - Line 7The
<hr>marks a change of topic between the address and the opening hours.
ASCII art with pre
Without <pre>, this cat would collapse into one line.
<pre>
/\_/\
( o.o )
> ^ < meow
</pre>Line-by-line explanation
- Lines 1 to 5
<pre>keeps all the spaces and line breaks, and uses a monospace font so the characters line up.
Common HTML Paragraph Mistakes
Using br to space paragraphs
First paragraph<br><br>
Second paragraph<br><br><p>First paragraph</p>
<p>Second paragraph</p>Separate paragraphs are better for meaning, accessibility and styling.
Expecting Enter to create a new line
<p>Roses are red
Violets are blue</p><p>Roses are red<br>
Violets are blue</p>A line break in your code is just whitespace. Use <br> when the line break is part of the content.
HTML Paragraph in Real Projects
Readable pages
Short paragraphs of two to four sentences are much easier to read on screens, especially phones. Most news sites and blogs break text into small paragraphs and use <hr> or headings to show topic changes.
HTML Paragraph Exercises
Answer each one and check it instantly. If you get stuck, open the hint before the answer.
How do you force a new line inside a paragraph?
<br> is the line break element.How many lines of text will this show?
<p>One
Two
Three</p>Put a divider between the two sections.
<p>Chapter 1 ends here.</p>
<>
<p>Chapter 2 begins.</p><hr> marks a thematic break between sections.The song lyrics should show on three separate lines inside one paragraph. Fix it.
<p>
Twinkle twinkle little star
How I wonder what you are
Up above the world so high
</p>- Still one paragraph
- Two line breaks inside the paragraph
<br> creates real line breaks.HTML Paragraph Quiz
3 questions to check what you learned.
What does the
<hr>element represent?- A heading row
- A hidden region
- A hyperlink reference
- A thematic break between sections
Which element keeps spaces and line breaks exactly as typed?
<p><span><pre><keep>
Does
<br>need a closing tag?- No, it's a void element
- Yes,
</br> - Only inside paragraphs
- Only in old HTML
HTML Paragraph Challenge
Write a postcard
Write a postcard with:
- A
<h2>that says Greetings from Lisbon - A paragraph of at least one sentence
- An
<hr>divider - A sign-off paragraph that uses
<br>to put "Love," and your name on separate lines
- An
<h2>says "Greetings from Lisbon" - There's an
<hr> - At least two paragraphs
- A paragraph after the
<hr>uses<br>
<p>Love,<br>Your name</p>.