Space may seem like the most obvious thing ever to an external observer. You hit the giant ‘space’ button, space appears, as expected, and you move on. However, in reality, typing in spaces is quite tricky, and there are numerous ways of going around it in HTML. Pick the wrong one, and what the browser renders on the recipient’s end may ruin what you had in mind.

One of the standard entities used in HTML is &nbsp. Today, we’ll explore what it is, when to use it, and when to avoid it. We’ll also share several cool hacks for using spacing in various written forms.

The key HTML entities

HTML entities are strings used to represent many reserved and invisible characters in HTML. These could be ‘<‘ or ‘>’ symbols, currencies (e.g. ‘€’ or ‘£’), and common signs such as quotation marks or, you guessed it, spaces.

If you were to use either of the entities directly in the code, the browser would interpret them as HTML and render them accordingly. For example, ‘<‘ or ‘>’ would likely be treated as the beginning or end of an HTML tag.

To make it clear to each browser what it should render, we use HTML entities, and we wrap them in an ampersand (&) at the beginning and a semicolon (;) at the end.

There are many more HTML entities though. This list should be an excellent reference to keep in your bookmarks.

When not to use &nbsp You’ve got to admit, the code above is not very readable. At the same time, creating multiple spaces with the use of &nbsp is a poor design practice. What may look OK on your screen is almost certain to collapse in an uncontrollable way on the user’s end because of the enormous diversity of screen sizes and resolutions.

Because of that, paddings, margins, or width are nearly always better approaches when designing responsive pages. We’ll discuss them all in the following chapter. &nbsp is a useful way of keeping characters together, but should probably be used just for that purpose.

Other spaces available in HTML

When separating words or other elements, you’re not limited just to a regular and non-breaking space. The list of available white-space characters is very long. Here are some of the most commonly used ones:

&nbsp in WordPress WordPress’s Gutenberg editor offers an easy way of inserting non-breaking spaces into articles. Instead of a space, press Option+Space on Mac or Ctrl+Shift+Space on Windows.

In the old HTML editor, this can be more tricky. You can try inserting &nbsp right into the editor. However, if your theme doesn’t have CSS rules specifying how it should be rendered (and many don’t), you’ll probably see a raw code displayed on the page.

A more reliable solution may be a simple shortcode defined in the functions.php file of your theme:

//[nbsp] shortcode
function nbsp_shortcode( $atts, $content = null ) {
$content = '&nbsp';
return $content;
}

add_shortcode( 'nbsp', 'nbsp_shortcode' );

the hat you can then call whenever you need a non-breaking space with ‘[nbsp]’. t

Alternatively, you can use one of the popular text editors for WP that support &nbsp – for example, EditorsKit, wp-Typography, or Advanced Editor Tools.