HTML Nonbreaking Spaces and Other Whitespace Characters

A small piece of HTML can change what a visitor sees or how the browser understands a page. In this lesson, you will explore nonbreaking spaces and other whitespace characters using a short example that you can inspect and change.

The Idea in Plain English

Ordinary HTML text usually collapses whitespace. Nonbreaking spaces keep words together; a soft hyphen offers an optional hyphenation point when a word wraps.

You can test this using a small local HTML file. Change one part at a time and check the result in the browser before adding more code.

A Working Example

Read the sample once before copying it. Notice the element names and attribute values, then compare them with the explanation below.

<p>Price: 25&nbsp;USD</p>
<p>Our extra&shy;ordinary project is ready.</p>
<p>VeryLong<wbr>ProductName</p>

What Each Part Does

A paragraph keeps one idea together as readable text.
The wbr element offers a safe optional line-break opportunity.

A space or optional break behaves differently depending on available line width and CSS white-space rules.

Keep the example small while learning. Once it behaves as expected, try it inside a larger page and make sure the URLs, files and surrounding HTML are correct.

Try It Yourself

Try this next: display a mixed-language document and inspect its behavior focused on Nonbreaking Spaces and Other Whitespace Characters, including a working example and an incorrect example to correct. Then inspect the page and explain what changed.

Common Beginner Mistakes

Using repeated nonbreaking spaces to align page columns instead of CSS.
Changing several parts of the example at once, making it difficult to see which part caused a different result.
Choosing a tag only because its default appearance looks right, without checking whether it describes the content correctly.

Key Takeaways

Ordinary HTML text usually collapses whitespace. Nonbreaking spaces keep words together; a soft hyphen offers an optional hyphenation point when a word wraps.
A space or optional break behaves differently depending on available line width and CSS white-space rules.
Test the markup in a browser, and check accessibility and real-world behavior where relevant.