What is nbsp in HTML? A Plain English Guide for Developers

Quick Answer:   stands for “non-breaking space” in HTML. The reason nbsp acts as a ‘non-breaking’ space is that when used in HTML, when found, the browser reads it as a ‘space (universally usable), but won’t convert it to a space unless triggering an additional code to do so. Because they are designed specifically for hanging pieces of text to produce a hanging indent from any piece equally, browsers count non-breaking spaces as always being ‘on’ when converting page content into another sort.

Many people may have wondered why they have typed multiple spaces into their pages using HTML and yet see only one space being rendered by their browser, or why they see hanging pieces of text where it doesn’t appear to them visually; they may have experienced this exact issue before experiencing its solution.

When writing HTML content, most beginners are unaware of how browsers treat whitespace, and do not expect their pressing of space bars to give them results similar to what they see on their printed page or their computer screen. This is why there is a non-breaking space, to provide browser developers another way of laying out page data.

This post will teach you exactly what nbsp is in HTML, how it works at the code level, what instances warrant its use, and when it’s better to use other methods of producing similar results, regardless of your level of HTML knowledge. Whether you’re creating very complex WordPress themes or simply creating basic front-end code from scratch, this information will be critical to you.  So let’s get into it.

What is   in HTML?

  is an HTML character entity that is used to represent a non-breaking space. It is an abbreviation for Non-Breaking Space.

When you use   between two words, the computer will make an actual space on the screen; however, you cannot create a break in between these two items when they are displayed in the browser, no matter how narrow the browser window.

To use an analogy, the space between these two items is like an invisible rope holding these two things together, allowing them to stay together even if there is a space between them.

Here’s a basic example:

<p>Price:&nbsp;$49.99</p>

In a browser, this looks like: Price: $49.99

The difference? Without   browser could wrap “Price:” onto one line and “$49.99” onto the next. That looks messy. With it, they stay together no matter the screen width.

  was formally defined as part of the HTML 2.0 specification and maps to the Unicode character U+00A0. You’ll find it referenced in the official HTML specification on character references.

How HTML Handles Spaces

Before you can really appreciate what   does, you need to understand how HTML handles regular whitespace. And honestly, this trips up a lot of developers who are just starting out.

To understand what   does, you first must understand how HTML handles normal white space, and this often confuses many of the new developers.

The Whitespace Collapse Rule

HTML collapses consecutive whitespace. That means if you type:

<p>Hello     World</p>

The browser renders it as: Hello World

All those extra spaces get squished into one. This is intentional behavior defined in the HTML spec. It makes it easier to write readable source code without affecting the visual output.

The same thing happens with line breaks in your source code. Multiple lines of whitespace between words? The browser treats them all as a single space.

Why This Causes Problems

This behavior is fine most of the time. But there are cases where you need precise spacing or you need to prevent a line break in a specific spot. A regular space can’t do either of those things reliably.

That’s exactly where   becomes the right tool.

Syntax of   vs Regular Space

Let’s get specific. There are actually three ways to write a non-breaking space in HTML:

All three produce the exact same result. Most developers stick with   because it’s the most self-explanatory.

How It Looks in Practice

<!-- Regular space — browser may collapse or wrap here -->
<p>10 kg</p>

<!-- Non-breaking space — "10" and "kg" always stay together -->
<p>10&nbsp;kg</p>

<!-- Multiple &nbsp; for intentional spacing (not ideal, but sometimes necessary) -->
<p>Name:&nbsp;&nbsp;&nbsp;John</p>

Worth noting: using multiple   entities to create indentation or visual padding is generally a bad practice. CSS handles that much better. But we’ll get to that.

Common Use Cases for   in HTML

So when should you actually reach for  ? Here are the situations where it genuinely earns its place.

1. Keeping Units and Values Together

This is probably the most common legitimate use. Numbers with units should never be split across lines. It looks unprofessional and confuses readers.

<p>The file size is 4&nbsp;MB.</p>
<p>Temperature: 37&nbsp;°C</p>
<p>Distance: 100&nbsp;km</p>

2. Preventing Awkward Line Breaks in Names

Full names, especially in tight layouts, can break in weird places. “Mr.” ending one line and “Smith” starting the next is a common culprit.

<p>Dr.&nbsp;Sarah&nbsp;Johnson</p>

3. Inline Code or Formulae

If you’re displaying a formula or technical string where word spacing matters visually and the content shouldn’t split,   helps maintain integrity.

4. Typographic Refinement in Articles

Some publishers use   before em-length punctuation or in proper typographic contexts where breaking before a short word (like “I” or “a”) would look bad at the end of a line.

5. Table Cell Placeholders

Empty table cells can sometimes collapse in certain browsers, causing visual glitches. Adding a   inside an empty <td> keeps the cell from collapsing.

<td>&nbsp;</td>

Common Mistakes with  

Knowing what   is one thing. Knowing when not to use it is just as important.

Mistake 1: Using   for Layout and Indentation

This is the most common misuse, especially among developers who learned HTML before CSS was well-supported. You’ll still see code like this:

<p>&nbsp;&nbsp;&nbsp;&nbsp;This paragraph is indented.</p>

Don’t do this. Use CSS padding, margin, or text-indent instead.   is a semantic character entity, not a layout tool.

Mistake 2: Stacking   for Visual Spacing

Stringing together a dozen   entities to push content around are fragile, inaccessible, and hard to maintain. Screen readers may handle them inconsistently. CSS flexbox or grid will do a cleaner job every time.

Mistake 3: Forgetting the Semicolon

<!-- Wrong — entity won't render correctly -->
<p>Price:&nbsp$49</p>

<!-- Correct -->
<p>Price:&nbsp;$49</p>

The semicolon at the end is required. Without it, some browsers may still render it correctly (because they’re lenient), but it’s invalid HTML and you shouldn’t rely on that behavior.

Mistake 4: Using   Instead of white-space: nowrap

If you want an entire phrase or element to never wrap, don’t litter   throughout it. Just use CSS:

.nowrap {
  white-space: nowrap;
}

This is cleaner and easier to control.

Mistake 5: Invisible Debugging Headaches

Here’s one I’ve seen catch developers off guard:   characters are invisible in source view. If they end up in unexpected places (sometimes through content pasted from Word or rich text editors), they can cause subtle spacing issues that are frustratingly hard to trace. If your spacing looks wrong and you can’t find the cause, look for hidden   entities in the markup.

  in WordPress and WooCommerce

If you develop a WordPress site, you’ve probably seen that both the Classic and Gutenberg editors often create space by inserting   when copying and pasting from Microsoft Word.

Pasting content copied from Microsoft Word into WordPress preserves the Word formatting, converting Word’s spacing into  
entities, which may cause unevenly spaced paragraphs or unexpected results on mobile devices.

A solution to this issue would be to always use “Paste as plain text” when pasting into the Classic Editor and to paste using the “Paste without formatting” option in the Gutenberg Editor. Alternatively, you can run a find-and-replace from the source code of your theme (or a plugin) to remove any extra   entities that may exist in your posts.

For example, WooCommerce will benefit from using   to improve product readability in price, unit of measure, and stock labeling, as having “In Stock” split into “In” and “Stock” on narrow product cards contributes to a poor shopping experience.

Final Thoughts

The knowledge of proper HTML markup for non-breaking spaces (  ) will benefit your website significantly, whether you’re using them appropriately or not. While it helps avoid the issue of text being separated (broken) at specific points within your site, the careless use (inappropriate usage) will create unintended consequences, such as layout challenges and/or poor accessibility.

In a nutshell, should be used to force text to stay together regardless of whether it is part of the same sentence or not (for instance, between two specific words or two specific numbers). All other uses of spacing, layout/indentation should be accomplished through CSS. If you understand how to use this information, your HTML will be cleaner and more efficient as a result.

The folks at DevDiggers work with WordPress/WooCommerce source code and create/customize 20+ plugins annually, as well as many more sites for our customers, so we are well aware of the small details that have a big impact on plugin output across many different themes/screensizes — such as the appropriate use of  

If you’re building a WooCommerce store and running into front-end issues with spacing, layout, or how product data renders, our team can help. Check out our WooCommerce plugins and development services to see how we work.

Frequently Asked Questions (FAQs)