Explained (With Code Snippets Included)

If you’ve spent any time writing or editing HTML, you’ve probably come across a strange little code that looks like this:  . At first glance, it’s easy to overlook or mistake for a typo. But it plays an important role in how text is displayed in web browsers. Whether you're building a website or just trying to understand a bit of code in an email or a CMS, it helps to know what this snippet is doing.

What Is  

  stands for “non-breaking space.” In plain English, it's a space that will not break across lines. That means if you put it between two words, they’ll stick together no matter what. The browser won’t move one word to the next line if things get too long. Note that this is a fundamental lesson when you learn HTML. Controlling visual outputs is key, and the non-breaking blank space code can do some helpful things.

It's especially useful in situations where you don’t want important pieces of text split up. Think of something like “100 dollars.” You probably don’t want “100” at the end of one line and “dollars” starting the next. Or maybe you’re working with a product name or a phrase where keeping things on the same line just looks better. That’s when a non-breaking space comes in handy.

Here's an example. Note that you can use the onine HTML code editor to make changes and see what happens in real time. 

 <p>
      Think of something like “100&nbsp;dollars.” You probably don’t want “100” at the end of one line and “dollars” starting the next. 
 </p>

This is also one easy way to add an html space. While it’s not ideal to use   to handle layout or design, it can give you a bit of extra spacing between words or elements if you're in a hurry or working in a simple environment that doesn’t allow CSS. Think of it like an empty character here.

Here's how to add a non-breaking space in HTML:

At hackr.io, we like to show examples.

What   doesn't do:

• Break paragraphs or words into a new line
• Change font size or style
• Change alignment, width, or columns

You'll want to use   in addition to CSS properties to maintain readability across different browsers and screen sizes. That's how you'll control indentation, white space, and line heights (among other properties).

When to use   instead of a regular space: You'll want to use the non-breaking space instead of a normal space when you don't want specific text broken into multiple lines. That's commonly done with dates, and it can be an easy way to ensure precise control over the text on your page.

Alternatives to  

While   can solve small problems, it’s not always the best solution. For example, excessive use of this type of non-breaking character can cause some layout issues (which can harm search engine visibility, if that's what you're going for). If you're trying to control layout, spacing, or line breaks more precisely, there are other tools you can use.

For example, CSS gives you much more control over spacing with properties like margin, padding, and white-space. You can even use word-break or overflow-wrap to control how text behaves when it reaches the edge of a container.

If you're trying to force a line break in your text, you might be tempted to add a bunch of &nbsp; characters. But a better option is to use the <br> tag for a break, or even better, structure your content with proper paragraph or block elements like <p>, <div>, or <span> and control their behavior with styles. The key is to maintain consistent spacing and to use best practices when building your site.

That way, your HTML stays clean and your layout stays flexible. Here are a few code examples that show the differences. As a reminder, you can use the online JavaScript editor or HTML editor to see real-time changes you make to this code.

<div>
  <p>At hackr.io, we like to show examples.</p>
  <p>Here's an example paragraph.</p>
  <p>I'm breaking the lines up with paragraphs here for the first few lines.</p>
  <p>
    Then, I can use&nbsp;&nbsp;&nbsp;to break up some of the words&nbsp;like&nbsp;this.
  </p>
</div>

You'll notice the output breaks the paragraphs out with <p> and spacing with &nbsp;.

Other HTML character entities

  is just one of many character entities available in HTML. These are little codes that let you insert special characters into your page, things that might otherwise be hard to type or could get misinterpreted by the browser.

Here are a few others you might run into:

• &lt; for the less-than symbol (<)
• &gt; for the greater-than symbol (>)
• &amp; for the ampersand (&)
• &quot; for quotation marks (")
• &copy; for the copyright symbol (©)
• &ensp; which stands for en space and makes a single space as long as an n in your current font
•  &emsp; which does the same thing but means em space and makes it the length of an m in the current font

How do &ensp;, &emsp, and &nbsp differ?

<p>This&nbsp;is&nbsp;normal&nbsp;spacing.</p>
<p>This&ensp;is&ensp;en&ensp;spacing.</p>
<p>This&emsp;is&emsp;em&emsp;spacing.</p>

Each one starts with an ampersand, ends with a semicolon, and tells the browser to show a specific character.

So next time you see &nbsp; in a chunk of HTML, you’ll know exactly what it’s doing. It’s keeping things together, preventing awkward unwanted line breaks, and helping your content display the way you intended with precise control. It’s a small piece of code, but once you understand it, you’ll spot it everywhere.