A Complete Guide to Inserting Spaces in HTML

HTML

This article teaches you how to add spaces and line breaks in HTML. Because HTML only inserts one space if you press the spacebar multiple times, you must use HTML tags to insert more than one space.

With HTML

Open an HTML document.

You can edit an HTML document with a text editor such as NotePad or TextEdit. You can also use an HTML editor such as Adobe Dreamweaver. To open an HTML document: Navigate to your HTML document in Windows Explorer on Windows or on a Mac. Right-click the HTML document you want to edit. Hover over Open with. Click the program you want to edit the document with.

Press

Spacebar To insert a space, click where you want it and press the spacebar. Normally, HTML only displays a space between words, no matter how many times you press the spacebar.

Type

  This is called “non-breaking space” because it prevents a line break from being inserted there. For example, if you say hello   together! typing will result in extra space between “Hello” and “All of you!” If you use this character too much, browsers will have trouble inserting proper line breaks to keep the text legible. You can also   type to force a space.

Add spaces of different widths.

You can insert a longer space using one of the following options: Two spaces – Type   a. Four spaces – Type   a. Indent – Type      a.

With CSS

Open an HTML or CSS document.

CSS can be applied at the top of the head, at the beginning of an HTML document, or written as an external CSS document. The so-called “head” of an HTML document can be found at the top of the file, between the “<head>” and “</head>” tags.

Create a style area for your CSS.

The style section goes in the head of your HTML code or in a separate style sheet. Create a style section in your HTML or style sheet document using the following tags. Type <style> to open the style section. All CSS code comes after this tag. Type </style> to close the style section. All CSS code comes before this closing tag.

Type this tag into the style area:

p {indent-text: 5em;} This tells the browser to indent five spaces at the appropriate place in the HTML code. You can adjust the number of spaces by typing a different number after “indent-text:”. The unit “em” corresponds to a space in the specified font size. You can use other units, e.g. percent (i.e. “indent-text: 15%;”) or dimensions (i.e. “indent-text: 3mm;”).

Where you want to indent, type

<p> This goes in the “body” of your HTML document, where you want to indent the text. This will add indentation to your text as specified in your CSS.

Find the best CSS Programming Books at bestofferspy.com.

With text already formatted

Open an HTML document.

You can edit an HTML document with a text editor such as NotePad or TextEdit. You can also use an HTML editor such as Adobe Dreamweaver. To open an HTML document: Navigate to your HTML document in Windows Explorer on Windows or on a Mac. Right-click the HTML document you want to edit. Hover over Open with. Click the program you want to edit the document with.

Before the text you want to preformat, type

<pre> This is the opening tag for preformatted text.

Type the text after the “<pre>” tag exactly as you want.

By pre-formatting your text, all spaces and line breaks entered by pressing Enter will appear on the HTML page.

Type after your text

</pre> This closes the preformatted text area.

Tips

If your spaces are turning into strange symbols in the browser, it’s probably caused by extra data stored in the word processor format, but not meant to be viewed online. Avoid this by using a plain text editor such as Notepad or TextEdit. CSS is a much more powerful and predictable way to lay out your pages, including the spacing between your text. The “non-breaking space” &nbsp; is an example of a character object, which is code that refers to a character that you can’t type on your keyboard.

Warnings

The HTML character for Tab ↹ &#09; doesn’t work the way you might think. A standard HTML document has no tabs, so the tab character does nothing. Always write your HTML code in a code editor or a plain text file, not in a word processor file format.

content

Content Team

Content Team is a team of creative bloggers and marketers that conceptualize, create, and publish the most effective money-saving tips and the ultimate shopping guides.