How to Insert Spaces in HTML

This is an article on how to insert spaces and line breaks into HTML documents. Since pressing the spacebar multiple times also shows only one space in the HTML, you need to use the HTML tag to insert multiple spaces at once.

Table of Contents

Using HTML

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/1/12/Insert-Spaces-in-HTML-Step-1-Version-4.jpg/v4-460px-Insert-Spaces- in-HTML-Step-1-Version-4.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/1/12/Insert-Spaces-in-HTML-Step-1- Version-4.jpg/v4-728px-Insert-Spaces-in-HTML-Step-1-Version-4.jpg”,”smallWidth”:460,”smallHeight”:259,”bigWidth”:728,”bigHeight” :410,”licensing”:”<div class=”mw-parser-output”></div>”}

Open HTML text. You can edit HTML text using a text editor like NotePad or TextEdit on Windows. You can also use an HTML editor program like Adobe Dreamweaver. Follow these steps to open the HTML document:

Access HTML text in File Explorer on Windows or Finder on Mac.
Right-click the HTML text that you want to edit.
Place the cursor at Open with .
Click the program that you want to use to edit the text.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/6/6f/Insert-Spaces-in-HTML-Step-2-Version-5.jpg/v4-460px-Insert-Spaces- in-HTML-Step-2-Version-5.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/6/6f/Insert-Spaces-in-HTML-Step-2- Version-5.jpg/v4-728px-Insert-Spaces-in-HTML-Step-2-Version-5.jpg”,”smallWidth”:460,”smallHeight”:259,”bigWidth”:728,”bigHeight” :410,”licensing”:”<div class=”mw-parser-output”></div>”}

Press SPACEBAR to add a regular space. To add regular space, you would click where you want to add space and press the spacebar. Usually HTML just shows a space between words no matter how many times you press the spacebar.

Import to increase the space. This is a non-linebreak space because you cannot break a line where the space is located. ^{[1] X Research Source}

For example, if you enter Hello! then a space will be inserted between “Hello” and “you!”
If you abuse this feature, it will be difficult for the browser to insert line breaks in an orderly and readable manner. ^{[2] X Research Source}
You can also enter to increase the space.

Insert multiple blanks with different widths. You can insert longer blanks using one of the following options: ^{[3] X Research Source}

Two spaces – Enter
Four spaces – Enter
Indent – Enter

Using CSS

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/c/ce/Insert-Spaces-in-HTML-Step-5-Version-5.jpg/v4-460px-Insert-Spaces- in-HTML-Step-5-Version-5.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/c/ce/Insert-Spaces-in-HTML-Step-5- Version-5.jpg/v4-728px-Insert-Spaces-in-HTML-Step-5-Version-5.jpg”,”smallWidth”:460,”smallHeight”:259,”bigWidth”:728,”bigHeight” :410,”licensing”:”<div class=”mw-parser-output”></div>”}

Open HTML or CSS text. You can use CSS in the beginning of the HTML document or edit the CSS text separately.

The beginning of the HTML text is the top of the file, placed between the “<head>” and “</head>” tags.

Create CSS styles. The style section is placed in the preamble of the HTML code, or in a separate style page. Use the following tags to create a style section in HTML text or other style pages.

Type <style> to open the styles section. All CSS code will be entered after this tag.
Type </style> to close the style section. All CSS code must be entered before this closing tag.

Enter the following tag in the style area: p {text-indent: 5em;} . This requires the browser to create indentation with 5 spaces in the appropriate HTML code.

You can adjust the number of spaces by entering another number after “text-indent:”.
The “em” unit is equivalent to one space in the selected font size. You can use another unit, such as a percentage (for example, “text-indent: 15%;”) or a measurement unit (for example, “text-indent: 3mm;”).

Type <p> where you want to add indentation. You can enter this tag anywhere where text indentation is needed. This is the operation to add indentation in accordance with the specifications in CSS.

Use preformatted content

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/6/63/Insert-Spaces-in-HTML-Step-9-Version-2.jpg/v4-460px-Insert-Spaces- in-HTML-Step-9-Version-2.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/6/63/Insert-Spaces-in-HTML-Step-9- Version-2.jpg/v4-728px-Insert-Spaces-in-HTML-Step-9-Version-2.jpg”,”smallWidth”:460,”smallHeight”:259,”bigWidth”:728,”bigHeight” :410,”licensing”:”<div class=”mw-parser-output”></div>”}

Open HTML text. You can edit HTML text with a text editor like Notepad or TextEdit on Windows. You can also use an HTML editor program like Adobe Dreamweaver. Follow these steps to open the HTML document:

Access HTML text in File Explorer on Windows or Finder on Mac.
Right-click the HTML text that you want to edit.
Place the cursor at Open with .
Click the program that you want to use to edit the text.

Type <pre> before the content that you want to preformat. This is an opening tag for preformatted content.

Type what you want right after the “<pre>” tag. By preformatting the content, any spaces and line breaks created by pressing “Enter” will be displayed on the HTML page. ^{[4] X Research Sources}

Type </pre> after the content. This is the action to close the preformatted content.

Advice

If spaces become strange characters on a web browser, it is usually due to extra data in the format of a word-processing program that is not intended for online display. Avoid this situation by using a plain text editor like Notepad or TextEdit.
Using CSS is a more efficient and predictable way of setting up a page, including creating space for content.
Spaces without line breaks is a character entity – a code for a character that you can’t type from the keyboard.

Warning

HTML Character for Tab Not as functional as you think. Standard HTML text doesn’t have tab stops, so the tab character has no function at all.
Always write HTML in a code editor or plain text file instead of a word processing file format.

Steps

Using HTML

Using CSS

Use preformatted content

Advice

Warning

Related Posts