A Guide to Paragraphs and Line Breaks in HTML

Introduction

Two of the most common HTML elements for controlling text layout are:

1<p>

and:

1<br>

The <p> element is used to create paragraphs.

The <br> element is used to create line breaks.

They may seem similar at first, but they are used for different purposes.

The Paragraph Element

Paragraphs are created using the <p> element.

The letter p stands for “paragraph”.

Here is a basic example:

1<p>This is a paragraph.</p>

This tells the browser that the text is a paragraph.

A paragraph has an opening tag:

1<p>

It also has a closing tag:

1</p>

The text goes between the opening and closing tags:

1<p>This text is inside a paragraph.</p>

Creating Multiple Paragraphs

If you want more than one paragraph, use a separate <p> element for each paragraph.

1<p>HTML is used to structure content on a web page.</p>2 3<p>CSS is used to control how that content looks.</p>4 5<p>JavaScript can be used to add interactivity.</p>

In the browser, these will appear as separate blocks of text.

Most browsers automatically add some space before and after paragraphs. This makes the text easier to read.

Why Paragraphs Are Important

Paragraphs are not just for appearance. They also give your content structure.

A paragraph should usually contain one idea or a small group of related sentences.

For example:

1<p>HTML is the language used to structure web pages.</p>2 3<p>It uses elements to describe different types of content, such as headings, paragraphs, links, and lists.</p>

This is better than putting everything into one large block:

1<p>HTML is the language used to structure web pages. It uses elements to describe different types of content, such as headings, paragraphs, links, and lists.</p>

Both examples are valid HTML, but the first version is easier to scan and read.

The Line Break Element

A line break is created using the <br> element.

The letters br stand for “break”.

Here is an example:

1<p>First line<br>Second line</p>

This displays as:

1First line2Second line

Unlike <p>, the <br> element does not have a closing tag.

Write this:

1<br>

Do not write this:

1<br></br>

When to Use <br>

Use <br> when the line break is part of the content.

A common example is an address:

1<p>2  Web Design Studio<br>3  10 High Street<br>4  Birmingham<br>5  B1 1AA6</p>

Another example is a poem, where each line matters:

1<p>2  The sun is low<br>3  The sky is bright<br>4  The evening settles in5</p>

In these examples, the line breaks are part of the meaning or expected format of the text.

When Not to Use <br>

Do not use repeated <br> elements just to create extra space between sections.

Avoid this:

1<p>About us</p>2<br>3<br>4<p>We build simple websites for small businesses.</p>

A better version is:

1<p>About us</p>2 3<p>We build simple websites for small businesses.</p>

If you want more space between paragraphs, use CSS:

1p {2  margin-bottom: 20px;3}

HTML should describe the structure of the content. CSS should control the visual spacing.

Paragraphs vs Line Breaks

The difference between <p> and <br> is important.

Use <p> for separate blocks of text:

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

Use <br> for a new line inside the same block of text:

1<p>First line<br>Second line</p>

A paragraph creates a separate section of text.

A line break only moves the text onto the next line.

Pressing Enter in HTML Does Not Usually Create a Line Break

Beginners often expect line breaks in their code editor to appear in the browser.

For example:

1<p>2This is line one.3This is line two.4This is line three.5</p>

In the browser, this will usually appear as one paragraph:

1This is line one. This is line two. This is line three.

This happens because HTML collapses most extra spaces and line breaks in the source code.

If you want visible line breaks, use <br>:

1<p>2This is line one.<br>3This is line two.<br>4This is line three.5</p>

Do Not Use Empty Paragraphs for Spacing

Another common mistake is using empty paragraphs to create space.

Avoid this:

1<p>First paragraph.</p>2<p></p>3<p></p>4<p>Second paragraph.</p>

Empty paragraphs do not add meaningful content.

Use normal paragraphs:

1<p>First paragraph.</p>2<p>Second paragraph.</p>

Then use CSS if you need to adjust the spacing:

1p {2  margin-bottom: 24px;3}

The Horizontal Rule Element

Another simple element that affects text flow is <hr>.

The <hr> element creates a thematic break between sections.

For example:

1<p>This section introduces the topic.</p>2 3<hr>4 5<p>This section moves on to a different but related point.</p>

Browsers usually display <hr> as a horizontal line.

Like <br>, the <hr> element does not need a closing tag.

Write this:

1<hr>

Do not write this:

1<hr></hr>

Use <hr> when there is a real break or shift between sections of content. Do not use it only as decoration.

A Complete Example

Here is a simple HTML page using paragraphs, line breaks, and a horizontal rule:

1<!DOCTYPE html>2<html lang=”en”>3<head>4  <meta charset=”UTF-8″>5  <title>Paragraphs and Line Breaks Example</title>6</head>7<body>8 9  <h1>Paragraphs and Line Breaks</h1>10 11  <p>Paragraphs are used for separate blocks of text.</p>12 13  <p>Each paragraph should contain one idea or a small group of related sentences.</p>14 15  <hr>16 17  <p>18    Web Design Studio<br>19    10 High Street<br>20    Birmingham<br>21    B1 1AA22  </p>23 24</body>25</html>

This example uses:

1<p>

for paragraphs,

1<br>

for line breaks inside an address,

and:

1<hr>

for a thematic break between sections.

Common Mistakes to Avoid

One common mistake is using <br> instead of paragraphs.

Incorrect:

1First paragraph.<br><br>2Second paragraph.<br><br>3Third paragraph.

Better:

1<p>First paragraph.</p>2<p>Second paragraph.</p>3<p>Third paragraph.</p>

Another common mistake is using paragraphs without closing them.

Incorrect:

1<p>This is the first paragraph.2<p>This is the second paragraph.

Better:

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

A third mistake is using empty paragraphs for spacing.

Incorrect:

1<p>First paragraph.</p>2<p></p>3<p>Second paragraph.</p>

Better:

1<p>First paragraph.</p>2<p>Second paragraph.</p>

Then use CSS to control spacing.

Best Practices

Use <p> for normal paragraphs of text.

Use a new <p> element for each separate paragraph.

Use <br> only when a line break is part of the content, such as an address or poem.

Do not use repeated <br> elements for spacing.

Do not use empty <p> elements for spacing.

Use CSS margins and padding to control visual space.

Use <hr> only when there is a real thematic break between sections.

Summary

The <p> element creates a paragraph:

1<p>This is a paragraph.</p>

The <br> element creates a line break inside the same block of text:

1<p>First line<br>Second line</p>

The <hr> element creates a thematic break between sections:

1<hr>

Use paragraphs for separate blocks of text. Use line breaks only when the break is part of the content. Use CSS, not repeated <br> tags or empty paragraphs, when you want to control spacing.

Understanding the difference between paragraphs and line breaks will help you write cleaner, clearer, and more readable HTML.