&nbsp and HTML space tips and solutions

Whitespace seems like a simple thing. You press spacebar and you get a space - right? Well, in the world of computers and websites, spaces in text can become complicated. Due to the way HTML was designed and the methods browsers use to read and display HTML the use of space has some issues that are best to keep in mind.

An important way to control spaces in HTML and emails is to use an HTML entity called the NonBreakingSpace - also known as  .

An introduction to HTML entities

There are many ways to encode text in HTML (encoding basically means making text readable for computers). This could be in representing currency symbols such as € or ¥ for instance or angle brackets such as < and >.

To take the later example: because the angle brackets are used in HTML to denote the beginning and end of an HTML tag those characters cannot be used literraly in text without either being escaped (another topic!) or encoded in a safe way that the computer understands. For that reason HTML entities were invented. By writing a special code in HTML (starting with an ampersand and ending with a semicolon) we can tell the computer that we mean to write another character.

So to use an < less than symbol in HTML we can use the HTML entity <. Here are some more examples:

So what about the &nbsp?

So now we have covered HTML entities let's talk about non-breaking spaces - for that is what nbsp means. A non breaking space simply means a press of the spacebar: a whitespace character that does not break the line (like a return or press of the enter button might imply). There are many ways to write an nbsp in HTML or in emails. The simplest is simply  . Notice the & at the start and ; at the end. If you forget these sorrounding characters it will show the letters nbsp instead.

Here is a table of aliases that also give you a non-breaking space

Why though?

When you need make sure that a whitespace is not collapsed in the HTML you are white (say, a space between two divs) use an   entity to ensure the whitespace is always rendered.

<!-- using a space between divs can get squeezed by the browser -->
<div> </div>
<!-- use a non-breaking space entity to prevent browser naughtiness -->
<div>&nbsp;</div>

Next steps

For more information on non-breaking spaces see here.