Here’s a complete, detailed guide on how to add line breaks in HTML, including all methods, best practices, and examples.
In this article:
1. Using the <br> Tag (Recommended)
- The
<br>element is used to insert a line break within text. - It is an inline, self-closing element:
<br> - Commonly used for addresses, poems, or lines in a paragraph
Example:
<p>
Roses are red,<br>
Violets are blue,<br>
Sugar is sweet,<br>
And so are you.
</p>
Result:
- Each
<br>moves the text to the next line without creating a new paragraph.
Notes on <br> Usage
- Should not be used to add spacing between paragraphs.
- Use
<p>with CSSmargin-bottomfor paragraph spacing. - Only use
<br>for line breaks inside a block of text.
2. Using <p> for Paragraph Breaks
<p>creates a new block-level paragraph with spacing above and below.
Example:
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
Notes:
- Adds spacing automatically
- Preferred for semantic and structured content
- Use
<br>inside<p>only if a line break is required within the paragraph.
3. Using CSS for Line Breaks
3.1 White-space property
- CSS property
white-spacecontrols how whitespace and line breaks are handled.
<p class="preformatted">
This is line one.
This is line two.
This is line three.
</p>
<style>
.preformatted {
white-space: pre-line;
}
</style>
Result:
- Text respects line breaks in HTML source
white-space: pre→ preserves spaces and line breaks exactlywhite-space: pre-wrap→ preserves all spaces and wraps text within container
3.2 Using margin or padding for spacing
- Add vertical spacing between lines or elements instead of
<br>
<p style="margin-bottom: 20px;">First line of paragraph</p>
<p>Second line of paragraph</p>
4. Line Breaks in Other Elements
- Inside
<div>:
<div>
Hello<br>
World!
</div>
- Inside
<pre>: preserves line breaks automatically
<pre>
Line one
Line two
Line three
</pre>
- Inside
<textarea>: preserves user-entered line breaks
5. Avoid Using <br> for Layout
- Do not use
<br>for spacing between sections or paragraphs. - Instead, use CSS margins or padding for maintainable layout:
<style>
section {
margin-bottom: 30px;
}
</style>
<section>Section 1</section>
<section>Section 2</section>
6. Full Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Line Breaks Example</title>
<style>
p {
line-height: 1.6;
}
.preformatted {
white-space: pre-line;
}
</style>
</head>
<body>
<h2>Using <br></h2>
<p>
Hello World!<br>
This text appears on the next line.<br>
Another line here.
</p>
<h2>Using Paragraphs</h2>
<p>First paragraph with spacing.</p>
<p>Second paragraph with spacing.</p>
<h2>Using Preformatted Text</h2>
<p class="preformatted">
Line one in HTML source
Line two in HTML source
Line three
</p>
</body>
</html>
7. Summary
| Method | Code Example | Use Case | Notes |
|---|---|---|---|
<br> | Line 1<br>Line 2 | Single line breaks inside text | Recommended for line breaks only, not spacing |
<p> | <p>Paragraph 1</p><p>Paragraph 2</p> | Paragraphs | Adds spacing automatically, semantic |
<pre> | <pre>Line1\nLine2</pre> | Preformatted text | Preserves spaces & line breaks exactly |
CSS white-space | white-space: pre-line; | Respect line breaks in text | Modern and flexible alternative |
CSS margin / padding | p { margin-bottom: 20px; } | Spacing between elements | Preferred over <br> for layout |
✅ Best Practice:
- Use
<br>only for line breaks inside a paragraph. - Use
<p>and CSS margins for paragraph spacing and layout. - Use
<pre>orwhite-space: pre-linefor preformatted text.
Other Courses:
