HTML Whitespace

Understanding HTML Whitespace

Whitespace is the spacing created by characters such as spaces, tabs, and line breaks within an HTML document.

Whitespace helps make HTML source code readable, but browsers do not normally display every whitespace character exactly as it appears in the markup. Understanding how whitespace is processed helps you format source code clearly without relying on extra spaces or line breaks to control the appearance of a webpage.

Whitespace Characters

In HTML source code, whitespace commonly includes ordinary spaces, tabs, and line breaks.

<p>HTML uses whitespace between words.</p>

Whitespace is also used throughout the source to separate attributes and make nested markup easier to read:

<section class="intro">
  <h2>About HTML</h2>
  <p>HTML structures webpage content.</p>
</section>

The spaces and line breaks used to indent this example improve the readability of the source code without normally adding matching visible space to the rendered webpage.

Whitespace Collapsing

In normal HTML text, browsers generally collapse sequences of whitespace characters into a single visible space.

For example, this source contains several spaces between the words:

<p>Learn     HTML     today.</p>

The browser normally displays it as:

Learn HTML today.

The same principle applies when line breaks and indentation appear between words:

<p>
  Learn
  HTML
  today.
</p>

That markup will normally appear as ordinary text with single spaces between the words rather than as three separate lines.

Edit the spaces and line breaks in the example below and compare the HTML source with what the browser displays.

This behavior allows developers to format HTML source code for readability without creating unwanted gaps throughout the rendered page.

Whitespace in HTML Source Code

Because normal whitespace is generally collapsed when rendered, HTML source can be organized across multiple lines without forcing the page content to follow the same visual arrangement.

For example:

<p>
  This paragraph is written
  across several lines
  in the HTML source.
</p>

The browser normally presents the text as one continuous paragraph, wrapping it according to the available width rather than according to the line breaks in the source.

This is an important distinction: source formatting is primarily for people reading the code, while page layout is controlled by HTML structure and CSS.

Indentation & Whitespace

Indentation is created with whitespace and is used to make the nesting structure of an HTML document easier to recognize.

For example:

<main>
  <section>
    <h2>About Us</h2>
    <p>Learn more about our company.</p>
  </section>
</main>

The indentation visually shows that section is nested inside main, while the h2 and p elements are nested inside section.

The browser does not need this indentation to understand the nesting because the HTML tags establish the structure. The indentation exists primarily to make that structure easier for people to read and maintain.

These tutorials use two spaces for each level of nesting. Other projects may use tabs or a different number of spaces, but consistency is more important than the particular indentation style chosen.

Creating Visible Line Breaks

Pressing Enter or adding additional line breaks in ordinary HTML source does not normally create a visible line break in rendered text.

For example:

<p>First line
Second line</p>

The browser will normally display the text on the same line when enough horizontal space is available.

When a line break is actually part of the content, the br element can be used:

<p>123 Main Street<br>
Prineville, Oregon</p>

The br element should be used when a line break has meaning within the content, such as an address, poem, or similar text. It should not be used repeatedly to create general page spacing.

Spacing between sections, paragraphs, headings, and other page elements should normally be controlled with CSS.

Preserving Whitespace with Preformatted Text

The pre element represents preformatted text and normally preserves the spaces and line breaks written inside it.

<pre>
Line one
    Line two
        Line three
</pre>

Unlike normal paragraph text, the spacing in a pre element is normally displayed much more closely to how it appears in the source.

The pre element is useful for content where spacing and line breaks are significant, such as formatted code, text diagrams, or other preformatted material.

Whitespace immediately inside a pre element is significant, so indentation used only to make the surrounding HTML source look tidy can also become part of the displayed content.

Non-Breaking Spaces

HTML provides the   character reference for a non-breaking space.

<p>10&nbsp;km</p>

A non-breaking space creates a space while also preventing a normal line break at that position.

It can be useful when two pieces of text should remain together, but it should not be repeated many times to create visual spacing:

<!-- Avoid using repeated non-breaking spaces for layout -->
Name:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Diane

Using repeated   characters for alignment or indentation creates fragile markup. CSS should be used when visual spacing or layout is required.

Controlling Whitespace with CSS

CSS provides additional control over how whitespace and line wrapping are displayed. Properties such as white-space can change the browser's normal whitespace behavior.

For example:

.preserve-space {
  white-space: pre-wrap;
}

CSS whitespace properties will be covered in greater detail in the CSS tutorials. For now, the important principle is that HTML source formatting and visual page spacing serve different purposes.

Use HTML to structure the content, whitespace to keep the source readable, and CSS when you need to control visual spacing or text wrapping.

Common Whitespace Mistakes

Whitespace is simple to use, but several common habits can make HTML harder to maintain or produce unreliable page layouts.

• Adding multiple spaces in the source and expecting all of them to appear in the browser.
• Pressing Enter repeatedly and expecting source line breaks to create visible page spacing.
• Using repeated br elements to create vertical space between sections.
• Using repeated   characters to align page content.
• Indenting nested elements inconsistently.
• Assuming indentation determines the actual HTML hierarchy.
• Forgetting that whitespace inside preformatted content may be displayed.
• Using source formatting instead of CSS to control the visual layout.

Keeping these responsibilities separate makes both the HTML source and the rendered webpage easier to understand and maintain.

HTML Whitespace Best Practices

Good whitespace practices make source code easier to read while leaving visual presentation to the appropriate HTML elements and CSS.

• Indent nested HTML consistently.
• Keep sibling elements aligned at the same indentation level.
• Use source line breaks where they improve code readability.
• Do not rely on repeated spaces to create page layout.
• Use br only when a line break is meaningful to the content.
• Use   when a genuine non-breaking space is needed, not as a general spacing tool.
• Use pre when whitespace is part of the content and needs to be preserved.
• Use CSS to control margins, padding, layout, and other visual spacing.

A useful rule is to use whitespace in your HTML source to make the code readable, while using proper HTML elements and CSS to determine how the webpage itself should look.

Summary

HTML whitespace includes spaces, tabs, and line breaks. In normal text, browsers generally collapse sequences of whitespace into a single visible space, allowing HTML source code to be indented and formatted without creating matching gaps in the rendered page.

Visible line breaks should be created with appropriate HTML when they are part of the content, while visual spacing and layout should normally be controlled with CSS. The pre element can preserve whitespace when formatting itself is meaningful, and   can provide a non-breaking space when one is genuinely needed.