Whitespace in HTML: How Spaces and Line Breaks Are Displayed

One of the first surprises in HTML is that pressing Enter or adding extra spaces in your file does not change what the browser shows. This lesson explains why and what to use instead.

Whitespace collapses#

In normal text, the browser treats any run of spaces, tabs and new lines as a single space:

<p>This     sentence
   is spread over
         several lines.</p>

The result is one line of text with single spaces. This is called whitespace collapsing. It is useful: you can indent and wrap your HTML for readability without changing the page.

Whitespace at the very start and end of a paragraph is ignored too.

Line breaks with br#

To break a line inside the same paragraph, such as in an address or a poem, use <br>:

<p>
  Laviyx Learn<br>
  12 Example Road<br>
  Hyderabad
</p>

Use <br> only where the line break is part of the content. To separate ideas, use separate <p> elements, and to add space between elements, use CSS margin. Stacking <br><br><br> for spacing is a common beginner habit that is hard to maintain.

Keeping formatting with pre#

The <pre> (preformatted text) element shows text exactly as written, with all spaces and new lines, in a monospace font:

<pre>
Name      Score
Asha        92
Ravi        87
</pre>

<pre> is ideal for code samples, ASCII art and text where alignment matters. A single new line straight after the opening <pre> tag is ignored, so you can start the content on the next line.

Non-breaking spaces#

  is a non-breaking space. It does not collapse, and the browser will not wrap a line at it. Use it to keep things together, such as a number and its unit:

<p>The parcel weighs 5&nbsp;kg and costs ₹&nbsp;450.</p>

Do not use rows of     to indent text or create space; that is CSS's job.

Spaces between inline elements#

Whitespace between inline elements, such as links or images on the same line, becomes a visible space:

<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>

The new lines between the links turn into the spaces you see between them. This matters later when you lay out navigation menus with CSS.

Practice#

Day   Hours
Mon     2
Tue     3

<p>
  Twinkle, twinkle, little star,<br>
  How I wonder what you are.
</p>
<pre>
Day   Hours
Mon     2
Tue     3
</pre>

Key takeaway#