HTML Line Breaks
Master the art of controlling text flow in HTML. Learn when to use <br>, <p>, <pre> and understand how browsers handle whitespace.
How Browsers Process Line Breaks
Step 1: HTML Input
Browser receives raw HTML with line breaks and whitespace
Interactive Line Break Tester
Rendered Output:
This is the second line.
This is the third line.
HTML Code:
This is the first line.<br> This is the second line.<br> This is the third line.
Line Break Methods Explained
<br> Tag
Simple line break within text
Inline element for single line breaks
Poems, addresses, single breaks
<p> Paragraph
Block element for text paragraphs
Separate blocks of related text
Articles, content sections
<pre> Preformatted
Preserves whitespace and line breaks
Code blocks, formatted text
Code, ASCII art, formatted text
<div> with CSS
Block containers with CSS styling
Custom spacing and layout
Complex layouts, custom spacing
Whitespace
How browsers handle spaces and returns
Understanding default behavior
Understanding browser rendering
␣ Whitespace Collapsing
Browsers collapse multiple whitespace characters by default. Here's what happens:
💡 This is why you need <br> tags for line breaks and for multiple spaces!
📝 Real-World Examples
Mailing Address
Use <br> tags for formatted addresses
HTML Code:
John Doe<br> 123 Main Street<br> Suite 456<br> New York, NY 10001
Result:
Poem or Lyrics
<br> tags preserve line structure
HTML Code:
Roses are red<br> Violets are blue<br> HTML is awesome<br> And so are you!
Result:
Code Example
<pre> tag preserves formatting
HTML Code:
<pre>
function hello() {
console.log("Hello");
console.log("World!");
}
</pre>Result:
Article Content
<p> tags for readable paragraphs
HTML Code:
<p>This is the first paragraph of your article. It contains multiple sentences and forms a complete thought.</p> <p>This is the second paragraph. It continues the discussion from the first paragraph but represents a new idea or point.</p>
Result:
💡 Best Practices
Do's
Don'ts
🎨 CSS Whitespace Control
white-space: normal
Default behavior - collapses whitespace
Hello World → Hello World
white-space: pre
Preserves whitespace and line breaks
Hello World → Hello World
white-space: nowrap
Prevents line breaks
Long text continues in one line
white-space: pre-wrap
Preserves breaks, wraps long lines
Preserves formatting but wraps
white-space: pre-line
Collapses spaces, preserves breaks
Hello World New line → Hello World New line
word-break: break-all
Breaks words at any character
Verylongword → Verylong word
🎯 Key Takeaways
Right Tool for the Job
Choose the appropriate method based on your content type
Whitespace Matters
Understand how browsers collapse and process spaces
CSS Control
Use CSS for advanced whitespace and layout control