09. Whitespaces

Introduction

Whitespace in HTML refers to spaces, tabs, and line breaks in your source code. Understanding how browsers interpret and render whitespace is crucial for creating properly formatted HTML documents. While HTML collapses multiple whitespace characters, you can control spacing using specific techniques and elements.

How HTML Handles Whitespace

HTML treats multiple consecutive whitespace characters (spaces, tabs, newlines) as a single space when rendering. This behavior is called “whitespace collapsing.”

Whitespace Collapsing

<p>This    has    multiple    spaces</p>

Renders as: “This has multiple spaces” (single spaces)

<p>This
has
line
breaks</p>

Renders as: “This has line breaks” (all on one line with single spaces)

Single Spaces Preserved

HTML preserves single spaces between words:

<p>Word1 Word2 Word3</p>

Renders as: “Word1 Word2 Word3” (spaces preserved)

Whitespace Characters

HTML recognizes these as whitespace:

Space: Regular space character
Tab: Tab character (\t)
Newline: Line break (\n)
Carriage return: (\r)
Form feed: (\f)

All of these are collapsed into single spaces.

Controlling Whitespace

Non-Breaking Space

Use   (non-breaking space) to preserve spaces:

<p>Word1&nbsp;&nbsp;&nbsp;Word2</p>

Renders with multiple spaces preserved.

Use cases:

Preserving spacing in formatted text
Preventing line breaks between words
Creating visual spacing

Pre Element

The <pre> element preserves whitespace exactly as written:

<pre>
    This    preserves
    all    whitespace
    exactly    as    written.
</pre>

Note: <pre> also uses monospace font and preserves line breaks.

CSS white-space Property

Control whitespace behavior with CSS:

<p style="white-space: pre;">This preserves whitespace</p>
<p style="white-space: pre-wrap;">Preserves whitespace and wraps</p>
<p style="white-space: nowrap;">Prevents line breaks</p>

Indentation and Formatting

Code Readability

While whitespace is collapsed in rendering, it’s important for code readability:

<!-- Good: Readable indentation -->
<body>
    <header>
        <nav>
            <ul>
                <li>Item 1</li>
                <li>Item 2</li>
            </ul>
        </nav>
    </header>
</body>

<!-- Avoid: No indentation (hard to read) -->
<body><header><nav><ul><li>Item 1</li><li>Item 2</li></ul></nav></header></body>

Consistent Formatting

Use consistent indentation (spaces or tabs):

<!-- Using spaces (2 or 4 spaces) -->
<div>
  <p>Content</p>
</div>

<!-- Using tabs -->
<div>
  <p>Content</p>
</div>

Best practice: Choose one style and stick with it. Many teams use 2 or 4 spaces.

Whitespace in Attributes

Whitespace in attribute values is preserved:

<div class="container main featured">

The class attribute contains three values: “container”, “main”, and “featured”.

Quoted Attribute Values

Spaces in quoted values are part of the value:

<img alt="A beautiful sunset over the ocean">

The alt text includes all spaces.

Common Scenarios

Spacing Between Elements

Inline elements respect spaces between them:

<span>Hello</span> <span>World</span>

Renders with a space between “Hello” and “World”.

<span>Hello</span><span>World</span>

Renders as “HelloWorld” (no space).

Block Elements

Block elements create their own line breaks:

<div>First</div>
<div>Second</div>

Renders on separate lines regardless of whitespace in source.

Inline Elements

Inline elements flow with text:

<p>This is <strong>bold</strong> text.</p>

Spaces around inline elements are preserved in the flow.

Whitespace and CSS

CSS can control whitespace behavior:

/* Preserve whitespace */
.preserve {
    white-space: pre;
}

/* Preserve and wrap */
.preserve-wrap {
    white-space: pre-wrap;
}

/* No wrapping */
.no-wrap {
    white-space: nowrap;
}

/* Normal (default) */
.normal {
    white-space: normal;
}

Best Practices

Code Formatting

Use consistent indentation: 2 or 4 spaces, or tabs
Format for readability: Use line breaks and indentation
Don’t rely on whitespace for layout: Use CSS instead
Keep attributes readable: Line breaks in long attribute lists are fine

Content Spacing

Use CSS for spacing: Use margin, padding, gap for layout spacing
Use   sparingly: Only when necessary for content
Avoid multiple spaces: They collapse anyway
Use semantic elements: Let HTML structure handle spacing

Example: Properly Formatted HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Page</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>Welcome</h1>
            <nav>
                <ul>
                    <li><a href="/">Home</a></li>
                    <li><a href="/about">About</a></li>
                </ul>
            </nav>
        </header>
        <main>
            <article>
                <h2>Article Title</h2>
                <p>This is a paragraph with normal spacing. Multiple    spaces    collapse    to    one.</p>
                <p>This paragraph has a&nbsp;&nbsp;&nbsp;non-breaking space.</p>
            </article>
        </main>
    </div>
</body>
</html>

Common Mistakes

Relying on Whitespace for Layout

Problem:

<div>First</div>
<div>Second</div>
<!-- Expecting space between, but CSS controls this -->

Solution: Use CSS for spacing:

div {
    margin-bottom: 20px;
}

Inconsistent Indentation