Add spaces in HTML

Table of contents:

Add spaces in HTML
Add spaces in HTML
Anonim

This wikiHow teaches you how to put spaces and hyphens in HTML. Placing two spaces in html results in only one space on the page, so you need an HTML tag to put multiple spaces.

Steps

Method 1 of 3: Using HTML

Insert Spaces into HTML Step 1

Step 1. Open an HTML document

You can edit an HTML document with a text editor such as NotePad or TextEdit for Windows. You can also use an HTML editor such as Adobe Dreamweaver. Use the following steps to open an HTML document.

  • Go to the HTML document in File Explorer on Windows or the Finder on Mac.
  • Right-click on the HTML document you want to edit.
  • Hover over Open with.
  • Click on the program with which you want to edit the document.
Insert Spaces in HTML Step 2

Step 2. Press spacebar to add a regular space

To add a regular space, click where you want to add the space and press the spacebar. Normally, HTML will show only one space between words, no matter how many times you press the space bar.

Step 3. Type to force an extra space

This is called a non-breaking space because it prevents a line break in its location.

  • Hi everybody! typing for example results in an extra space between "Hi" and "Everyone!"
  • If you use this character too much, browsers will struggle to insert line breaks in a clean, readable way.
  • You can also type to force a space.

Step 4. Insert spaces of different widths

You can insert a longer space by using one of the following options:

  • Two spaces - Type
  • Four spaces - Type
  • Indent - Typ

Method 2 of 3: Using CSS

Insert Spaces in HTML Step 5

Step 1. Open an HTML or CSS document

CSS can be applied in the header of an HTML document, or it can be written as an external CSS document.

The header of an HTML document is at the top of the file. It's in between the and tags

Step 2. Create a style section for your CSS

The style section comes in the head of your HTML code or on a separate style sheet. Use the following tags to create a style section in your HTML or style sheet document.

  • Type to open the style section. All CSS code comes after this tag.
  • Type to exit the style section. All CSS code comes before this closing tag.

Step 3. Type the following tag in the style area: p {indent-text: 5em;} This tells the browser to create a 5 space indent when it has the correct HTML code.

  • You can change the number of spaces by typing another number 'indent-text:' afterwards.
  • The unit 'em' is equivalent to one space in that font. You can also use other units such as percentages (eg 'indent-text: 15%;') or units of measure (eg 'indent-text: 3mm;').

Step 4. Ty

where you want to add an indentation space.

This will end up anywhere in the text of your HTML document where you want your text to be indented. This will add an indentation in your text that matches the specifications in your CSS.

Method 3 of 3: Using preformatted text

Insert Spaces in HTML Step 9

Step 1. Open an HTML document

You can edit an HTML document with a text editor such as NotePad or TextEdit on Windows. You can also use an HTML editor such as Adobe Dreamweaver. Use the following steps to open an HTML document.

  • Go to the HTML document in File Explorer on Windows or the Finder on Mac.
  • Right-click on the HTML document you want to edit.
  • Place the mouse pointer on Open with.
  • Click on the program with which you want to edit the document.

Step 2. Type

for the text you want to format beforehand.

This is the opening tag for preformatted text.

Step 3. Type the text exactly as intended after the '

'-tag.

By pre-formatting the text, all spaces and line breaks created by pressing 'Enter' will be displayed on the HTML page.

Step 4. Type after the text.

This closes your pre-formatted text section.

Tips

  • If your spaces in the web browser become strange symbols, it is most likely caused by extra data stored in the word processing format that is not intended for online viewing. Avoid this by using a plain text editor like Notepad or TextEdit.
  • CSS is the most powerful and predictable way to format your page, including the spacing of the text.
  • The non-breaking space

    is an example of a character entity, a code that refers to a character that you cannot type on your keyboard.

Warnings

  • The HTML character for Tab ↹

    doesn't work as you might think. A standard HTML document has no tab stops, so the tab character does nothing.
  • Always write your HTML in a code editor or in a plain text file, not in a word processor.

Popular by topic