Post
Ask Question

How To Insert Spaces In HTML

Introduction

HTML is a standard markup language; it describes the structure of web page and consists of a series of elements, that tells the browser how to display the content.

In a plain text document, you can simply press the spacebar button to insert multiple spaces. However, it is not so easy to insert spaces in HTML web pages. It doesn't matter how many times you press the spacebar in HTML, the browser just displays a whitespace.

Therefore, you should add HTML tags before and after the text to find out their format.

Let's jump in!

1. Insert Spaces in HTML Using Paragraph Tag ( <p> )

The <p> element is a good way to insert a single blank line to HTML.

You can insert the <p> character in HTML to generate a paragraph break. The browser creates a space that separates paragraphs from each other, making continuous paragraphs more legible to read.

You can separate a block of text from another with white space.

<p>My Name is Deepak Tewatia.</p> 
<p>I am writing an article.</p>

Preview

Insert Spaces in HTML Using Paragraph Tag

2. Insert spaces in HTML using break tag ( <br> )

When you use the non-breaking space character to insert space on the same line, the <br> tag helps you to insert line breaks.

In particular, you can use it to create a block format, e.g. format an address. This line break can help readers or crawlers to understand easily without using new paragraph element.

<p> 3118 County Rd #148 <br>Philadelphia, Missouri(MO), <br> 63463  USA</p>

Preview

Insert spaces in HTML using break tag

3. Insert spaces in HTML using preformatted tag ( <pre> )

Even after using this tag, the browser retains the existing spaces and line breaks in your text. To be clear, the white space shown on the web page is equivalent to what you type. Therefore, inserting spaces to HTML using this tag is useful for setting a format for displaying code.

<pre>
    pre tag keeps all      spaces and
    line
    breaks.
</pre>

Preview

Insert spaces in HTML using preformatted tag

4. Insert spaces in HTML using non-breaking space tag ( &nbsp; )

Non-breaking space is a character entity. To insert a non-breaking space you would use a tag that is "&nbsp;"

If you want to insert one, two or more spaces then you need to use tag (&nbsp; ) one , two or number of required spaces respectively.

<p> There is one space in time between time frame and PM. {08:00&nbsp;PM} </p>
<p> There are two space between A & B. {A&nbsp;&nbsp;B} </p>
<p> There are three space between A & B.{A&nbsp;&nbsp;&nbsp;B} </p>

Preview

Insert spaces in HTML using non-breaking space tag

5. Insert more spaces in HTML using below mentioned non-breaking space tags

  • &#160;
  • &ensp;
  • &emsp;
<p> There is one space between A & B. {A&#160;B} </p>
<p> There are two space between A & B.{A&ensp;B} </p>
<p> There are four space between A & B.{A&emsp;B} </p>

Preview

Conclusion

Now, you know the useful methods to insert spaces in HTML.

Each method delivers different results of displaying spaces in HTML. Depending on your content layout, you need to select a suitable tag from the above-mentioned ones.

If you still have any questions on how to insert spaces in HTML, please leave your thoughts in the comment section below.


Similar Articles