&nbsp in HTML

Introduction

Some characters are reserved in HTML. So we have to take the help of character entities to those characters. We can implement those character entities with the help of the below method.

1. In the first example, we displayed the reserved characters' entity names.
2. In the second example, we have used the entity number to display the character.

&nbsp Entity

1. It is a character entity denoted by the non-breaking or fixed space.
2. We can take the help of this entity to provide the space, and this space does not break the line into new lines.
3. It is also similar to the regular space.

Syntax

We can implement the &nbsp entity with the help of the following syntax

Example 1:

Output:

Explanation:

In the above code, we have provided the &nbsp entity, which allows multiple spaces in a particular line. So, to create multiple spaces, we have to add   each time a space is required.

How to Add Non-breaking Spaces in HTML with &nbsp

The browser will display only one blank space even if we provide more than two spaces in our HTML code. So we can achieve this with the help of the character entity like   Let us see an example without using the character entity like &nbsp. The code will look like as below.

Code:

Output:

Explanation:

We have provided more than two spaces between the words in the above code. But the browser, by default, only accepts one space.

Let's now write the above code again with the help of &nbsp.

Example 2:

Output:

Explanation:

In the above code, we have seen 5 blank spaces between two words in the paragraph. This is because we have inserted   5 times between the two words of the paragraph. So without &nbsp, no character entity is possible in the code.

What If You Want a Bunch of Spaces in Your Code?

What should we do if there is a need for 10 blank spaces in the paragraph? If we write &nbsp 10 times, the code must be more varied and exciting. So instead of   we have to write   character entity for 2 non-breaking spaces, and   for 4 non-breaking spaces.

Example 3:

Output:

Explanation:

In the above code, we have inserted 5 blank spaces with the help of   once (4 spaces) and   once (1 space).

Why would You Need a Non-breaking Space in Your Code?

Sometimes, when there is no need for a break in the line, the HTML provides the line break between the words. We can prevent this with the help of a character entity. When we insert the character entity between the words, it only provides the space between two words but never breaks the line into a new line. Let us see the below code.

Example 4:

Output:

Conclusion

In the above article, we have seen that with the use and implementation of the     and the   character entities, you can display blank spaces in the browser. This isn't possible just using the spacebar key.