HTMLWhitespace & Formatting

Whitespace & Formatting

You indent your HTML for readability — but that indentation has almost no effect on how the page actually looks. This surprises a lot of beginners, so let's look at exactly what HTML does with whitespace in your source code.

HTML collapses whitespace

By default, the browser treats any run of spaces, tabs, and line breaks in your text content as a single space. It doesn't matter if you wrote one space or fifty, or split the text across ten lines — the rendered output looks the same.

HTML
<p>
    This      paragraph
        has lots of
    extra whitespace   and
  line breaks in the source.
</p>
This paragraph has lots of extra whitespace and line breaks in the source.

All of that irregular spacing and all of those line breaks collapse down to single spaces between words. This is called whitespace collapsing, and it's one of the most fundamental (if under-explained) rendering rules in HTML.

Why source indentation doesn't create visual space

Because of whitespace collapsing, indenting nested elements in your source code is purely for you — for readability while editing — and has zero effect on layout. Visual spacing between elements (margins, padding, gaps) is entirely CSS's job, not something you achieve by adding blank lines or extra indentation in HTML.

HTML
<!-- These two render IDENTICALLY -->
<div><p>Hello</p><p>World</p></div>

<div>
    <p>Hello</p>


    <p>World</p>
</div>
Don't fight for pixels in your markup
If you find yourself adding extra blank lines or nested containers purely to create visual gaps, that's a sign the spacing should be handled with CSS margin or padding instead. HTML formatting is for humans reading the source; CSS controls what users actually see.
The exception: <pre> preserves whitespace

The <pre> element (short for "preformatted") is the one major exception to whitespace collapsing. Whatever you put inside it — spaces, tabs, line breaks — is rendered exactly as written, in a monospace font by default.

HTML
<pre>
function greet(name) {
  return "Hello, " + name;
}
</pre>
function greet(name) {
  return "Hello, " + name;
}

This is exactly why code blocks and ASCII art are traditionally wrapped in <pre> — you need every space and line break preserved. A dedicated later page, Code & Preformatted, explores <pre> alongside <code> and <kbd> in full.

Forcing a single non-breaking space: &nbsp;

Sometimes you genuinely want an extra space that won't collapse — for example, to keep two words from being separated across a line break, like a person's initials and last name. The &nbsp; HTML entity inserts a non-breaking space that survives collapsing and prevents a line wrap at that point.

HTML
<p>J.&nbsp;R.&nbsp;R. Tolkien wrote The&nbsp;Hobbit.</p>
Use   sparingly
A little &nbsp; for things like unit pairs (10 km) or names is fine. Using several in a row to fake indentation or layout spacing is a misuse — that's a job for CSS padding or margin.

With whitespace rules settled, next we'll look at the categories that determine how elements actually flow next to each other on the page: block-level vs inline-level elements.