Paragraphs and Line Breaks: How to Structure Text in HTML

Note:
This page is part of the Complete HTML Guide for Beginners. Consult the main index for an overview of all topics.

---

Paragraphs <p>
and Line Breaks <br>

ORGANIZING TEXT: INTRODUCTION TO PARAGRAPHS <p> AND LINE BREAKS <br>

When we write text for a webpage, we can't just throw it in randomly. Just like in a book or a newspaper article, giving the content a clear structure is crucial. In HTML, two of the simplest and most used tools for organizing text are the <p> (paragraph) tag and the <br> (line break) tag.

Understanding the difference between these two and when to use one or the other is a basic yet crucial step for writing clean and semantically correct HTML code. Let's see how they work.

THE <p> TAG: CREATING WELL-DEFINED PARAGRAPHS IN HTML

The <p> tag is the standard way to define a paragraph in HTML. A paragraph is generally a block of text that expresses a complete concept or idea.

When you use the <p> tag, you enclose your block of text between <p> (opening tag) and </p> (closing tag). The interesting thing is that when the browser encounters a <p> tag, it does two important things:

• It recognizes that block as a separate unit of text.
• It automatically adds some vertical space before and after the paragraph, visually separating it from other elements on the page. This spacing greatly helps readability.

Here's a simple example:

<p>
This is the first paragraph of our text. It contains several sentences developing a specific idea.
</p>

<p>
This is a second paragraph. You'll notice the browser will display it separated from the first one, with some empty space in between.
</p>

<p>
And this is the third one. Each paragraph represents a logical block of content.
</p>

Here's how it will be displayed:

This is the first paragraph of our text. It contains several sentences developing a specific idea.

This is a second paragraph. You'll notice the browser will display it separated from the first one, with some empty space in between.

And this is the third one. Each paragraph represents a logical block of content.

When to use <p>: Use it whenever you have a block of text that constitutes a logical unit, like the paragraphs in this article. It's the correct way to separate different ideas in your content.

THE <br> TAG: FORCING A LINE BREAK WITHOUT INTERRUPTING THE FLOW

The <br> tag (which stands for line break) has a different purpose. It's used to force a line break, sending the text that follows to the next line, but *without* creating a new paragraph.

This means that the text starting on a new line after a <br> semantically remains part of the same preceding block of text, and the browser does not add the typical vertical spacing of paragraphs.

The <br> tag is a self-closing tag (or empty tag), which means it doesn't need a closing tag. You simply write <br>.

When is it useful to use <br>? Mainly in situations where the visual structure requires going to a new line, but the content is still part of the same logical "block". Classic examples include:

• Poems: To respect the division into verses.
• Addresses: To separate the lines of the address (street, city, zip code).

Let's see an example with an address:

<p>
My Skill Vault<br>
101 Code Street<br>
Webville, WV 12345<br>
Internet
</p>

Here's how it will be displayed:

My Skill Vault
101 Code Street
Webville, WV 12345
Internet

Notice how <br> is used inside a <p> tag. This is the correct usage: the address is a single block of information (a paragraph), but the individual lines need to break for readability.

COMMON MISTAKE: DON'T USE <br> TO CREATE SPACING

A very common mistake among beginners is using multiple <br> tags in a row (<br><br><br>) to create vertical space between different elements (e.g., between two paragraphs or between a paragraph and an image).

This is a practice to be absolutely avoided.

Why?

• Semantically wrong: <br> means "line break," not "add empty space." Using it to create spacing confuses the meaning of the code.
• Inefficient and hard to manage: If you need to change the spacing throughout the site, you would have to find and modify all the multiple <br> tags. A nightmare!
• There are better tools: Managing space and layout is the job of CSS (Cascading Style Sheets), which we will learn later. With CSS, you can define margins and padding precisely and flexibly.

So, the rule is simple: use <p> to define separate blocks of text (paragraphs) and use <br> only when you need a line break *within* an existing block of text for specific reasons (like poems or addresses). Never use it to simulate margins or spacing.

PARAGRAPHS VS. LINE BREAKS: CHOOSING THE RIGHT TAG

To recap the fundamental difference:

• <p>: Defines a paragraph. It's a block-level element (creates its own block) and the browser adds spacing above and below. Use it to separate logical blocks of text.
• <br>: Forces a line break within an existing block. It's an inline element (doesn't create a new block) and doesn't add extra spacing. Use it sparingly only where needed for internal formatting of a block (e.g., addresses, poems).

Understanding and applying this distinction will help you write cleaner, more meaningful, and easier-to-manage HTML, especially when you start using CSS to define the style of your pages.

---