The Paragraph and the Break: <p> vs <br>

Welcome to Day 6 of our HTML series!

We have built the skeleton and organised the headings. Now, we need to fill the page with text, but here is a scenario every WordPress user has faced at least once:

You are writing a page. You finish a sentence. You hit Enter.

Suddenly, a massive gap appears.

You think: “I don’t want a gap! I just want the next line!”

So you hit backspace. You try again. Same huge gap.

Or, the opposite happens. You want some breathing room between your heading and your text, so you hit Enter five times. It looks great on your laptop. Then you check your phone, and there is a scrolling wasteland of white space before the text starts.

This isn’t a glitch. It isn’t WordPress being difficult. It is the difference between two fundamental HTML tags:

1. The Paragraph (<p>)
2. The Line Break (<br>)

Today, we are going to master the art of spacing. We will teach you the “Shift+Enter” secret, and explain why hitting Enter repeatedly is the worst thing you can do for your mobile design.

The Analogy: Boxes vs. Plates 📦

To understand text spacing, imagine you are packing for a house move.

1. The Paragraph (<p>) is a Box

When you wrap text in a <p> tag, you are putting it inside a sturdy cardboard box.

• The Physics: You cannot stack cardboard boxes directly on top of each other without the lids touching and the sides bulging. There is always a natural gap (margin) separating them.
• The Meaning: A paragraph represents a “complete thought.” When you finish a thought, you seal the box, put it down, and start a fresh box for the next idea.

2. The Line Break (<br>) is a Plate

When you use a <br> tag, you are stacking dinner plates inside the box.

• The Physics: Plates touch directly. There is no gap between them. They sit flush against each other.
• The Meaning: You are continuing the same thought, just on a new physical line.

The WordPress Cheat Sheet:

• Hit Enter: Creates a new Box (Paragraph). Result: Big gap.
• Hit Shift + Enter: Stacks a Plate (Line Break). Result: No gap.

The Paragraph Tag (<p>)

This is the default unit of the web.

If you type text into WordPress and do nothing else, the system automatically wraps it in <p> tags behind the scenes.

The Code:

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

The “Margin” Magic:

Browsers automatically add a margin-bottom to every paragraph. This creates “White Space.”

Without this gap, your website would look like a “Wall of Text”—a solid block of grey that scares readers away.

Best Practice:

Keep your paragraphs short. In 2026, people skim-read on mobile screens. A paragraph should be 2-3 sentences max. If it looks like a novel, hit Enter (create a new box).

The Line Break Tag (<br>)

The <br> tag is unique. It is a Self-Closing Tag. It doesn’t wrap around text; it just sits there and forces the text to drop down.

The Code:

<p>
    12 High Street<br>
    Bristol<br>
    BS1 5TY
</p>

When to use it:

Use <br> (Shift+Enter) only when the lines are strictly related and should not be separated by a gap.

1. Addresses: As above. You don’t want a paragraph gap between the street and the city.
2. Poetry/Lyrics: Where the line ending matters for rhythm.
3. Sign-offs: “Kind Regards,[Break] John Smith.”

When NOT to use it:

Do not use <br> to separate two different sentences just because you “like the look of it.” If they are different sentences, they deserve their own paragraphs. Screen readers often pause at the end of a paragraph (<p>), but run straight through a break (<br>), which can make your content sound robotic to blind users.

The “Empty Paragraph” Crime 🚨

This is the most common design crime committed by business owners.

The Scenario:

You look at your page and think: “That Heading is too close to the text. I need more space.”

So, you click between them and hit Enter, Enter, Enter, Enter.

The Code You Created:

<h2>My Services</h2>
<p>&nbsp;</p> <!-- Empty Box -->
<p>&nbsp;</p> <!-- Empty Box -->
<p>&nbsp;</p> <!-- Empty Box -->
<p>We offer plumbing...</p>

Why this destroys your site:

1. The Mobile Disaster: On your 27-inch iMac, those 3 gaps look like a nice, airy 50px space. But on an iPhone, paragraph heights are calculated differently. Those 3 gaps might take up half the screen. Your user has to scroll past a wasteland of nothingness just to find the text.
2. Inconsistent Design: If you use “3 Enters” on one page and “4 Enters” on another, your site looks messy and unprofessional.
3. The Accessibility Fail: A blind user’s screen reader will literally read this out: “Heading… Paragraph blank… Paragraph blank… Paragraph blank…” It is incredibly annoying.

The Solution: Control the Gap with CSS (Margins) 📐

If you want more space, do not add fake content. Add Margin.

In the old days, you had to write code for this.

In 2026, tools like GenerateBlocks make this easy with visual sliders.

The Workflow:

1. Click on your Headline block.
2. Look at the sidebar settings under “Spacing”.
3. Find Margin Bottom.
4. Type 50px (or use the slider).

The Result:

The browser pushes the next paragraph down by exactly 50 pixels.

• Clean Code: No empty <p> tags cluttering your HTML.
• Mobile Control: You can set it to 50px on Desktop and automatically shrink it to 20px on Mobile. Your site looks perfect on every device.

Summary Checklist: The Spacing Audit

Open a page on your site right now and check for these signs:

1. [ ] The “Wall of Text”: Are your paragraphs longer than 4 lines? If so, split them with Enter.
2. [ ] The “Shift+Enter” Trap: Did you use <br> to separate paragraphs because you didn’t like the gap? (Bad practice—fix the margin instead).
3. [ ] The “Empty Gap”: Highlight the white space on your page with your mouse. If it turns blue, you have used empty paragraphs (Enter key spamming). Delete them and use Block Margins instead.

Understanding the difference between <p> and <br> is the difference between a site that looks professional and one that looks like a Word document gone wrong.

📅 Coming Up Tomorrow…

We have mastered the text layout. Now we need to look at Emphasis.

Why is Bold different from Strong? Why does Google care which one you use?

Join us for Stop Using Bold: Why <strong> and <em> Matter for Accessibility.