HTML Whitespace
Whitespace in HTML means any blank space — spaces, tabs, and new lines — that you add between words or tags. Understanding whitespace helps you write clean code and avoid confusion about why your text looks different on screen than in your code editor.
How Browsers Handle Whitespace
Browsers collapse multiple spaces and line breaks into a single space. This behavior is the default for all regular HTML text.
Think of it like reading a printed book. No matter how many blank lines you leave between two words in your source file, the browser prints them as if there is only one space between them.
Visual Diagram — Whitespace Collapse
Your HTML code: Hello World (5 spaces between) What browser shows: Hello World (only 1 space)
This collapsing happens because HTML treats all whitespace characters — spaces, tabs, and enters — as a single space character.
Where Whitespace Matters and Where It Does Not
Inside Text Content
Whitespace inside paragraphs, headings, and other text tags gets collapsed. You cannot push words apart just by pressing the spacebar multiple times.
Between HTML Tags
Whitespace between inline elements like images or links can appear as a small gap in some browsers. This gap comes from the newline character between closing and opening tags in your code.
Visual Diagram — Gap Between Inline Elements
HTML code written like this: <img src="cat.jpg"> <img src="dog.jpg"> Result: tiny gap appears between the two images HTML code written like this (no newline): <img src="cat.jpg"><img src="dog.jpg"> Result: images sit exactly side by side with no gap
The Non-Breaking Space
When you need a real visible space that browsers do not collapse, use the HTML entity . The letters stand for Non-Breaking Space.
Think of as a glued space. Regular spaces can be squashed together, but a non-breaking space stays exactly where you put it and keeps its width.
<p>Hello World</p>
The above code shows three visible spaces between Hello and World on screen.
Non-Breaking Space Use Cases
Use when you write units after numbers, such as 100 km or 50 kg, so the number and unit never split across two lines. You also use it inside table cells that have no visible content — an empty cell with only inside still renders its border correctly.
Preserving Whitespace with the pre Tag
The <pre> tag tells the browser to display text exactly as you typed it — spaces, tabs, and line breaks all stay visible.
<pre> Name Age City Alice 25 Delhi Bob 30 Mumbai </pre>
The browser shows the columns aligned exactly as they appear inside the tag. The <pre> tag uses a monospace font by default, which means every character takes the same width — perfect for code or data tables.
When to Use pre
Use <pre> to display source code, terminal output, or any text where exact spacing carries meaning. Do not use it for regular paragraphs because the monospace font looks different from the rest of your page text.
Whitespace in Inline vs Block Elements
Block Elements
Block elements like <p>, <div>, and <h2> always start on a new line. Extra blank lines between block elements in your code do not create extra space on screen.
Inline Elements
Inline elements like <span>, <a>, and <strong> sit inside lines of text. A newline in your code between two inline elements becomes a single space on screen.
Visual Diagram — Block vs Inline Whitespace
Block elements (each starts on its own line regardless): [Paragraph 1 text here ] [Paragraph 2 text here ] Inline elements (flow together in one line): [link1] [link2] [link3] ^ ^ these gaps come from newlines in your code
CSS and Whitespace Control
CSS gives you fine control over whitespace through the white-space property. Even though this is an HTML tutorial, it helps to know these values exist:
normal — the default; collapses whitespace and wraps text at the edge of its container.
nowrap — collapses whitespace but prevents line breaks; text runs in one long line.
pre — acts like the <pre> tag; preserves all whitespace and line breaks.
pre-wrap — preserves whitespace but still wraps text when it reaches the container edge.
Common Whitespace Mistakes
Mistake 1 — Using Spaces to Indent Text Visually
Pressing the spacebar many times does not create visual indentation. Browsers collapse all those spaces into one. Use CSS padding or margin for indentation instead.
Mistake 2 — Leaving Large Gaps Between Tags
Extra blank lines in your HTML file do not affect what the page looks like. Keep your code tidy by using consistent indentation rather than blank lines to separate sections.
Mistake 3 — Forgetting nbsp Inside Empty Cells
Empty <td> cells in a table can collapse visually in some browsers. Adding inside them keeps the cell at its correct height and makes borders visible.
Quick Reference
Entity / Tag | What It Does -----------------|----------------------------------------- | One non-collapsing visible space <pre> | Preserves all spaces and line breaks <code> | Shows code in monospace font (collapses whitespace) CSS: white-space | Controls whitespace behavior via stylesheet
Whitespace rules seem small, but they affect how your page looks and how your code reads. Knowing these rules early saves you time when layout problems appear later in your projects.