This wikiHow teaches you how to insert spaces and line breaks in HTML. Since you will only create a single space in your HTML when you press the spacebar multiple times, you need to use HTML tags to insert more than one space at a time.
Step
Method 1 of 3: Using HTML Code
Step 1. Open the HTML document
You can edit HTML documents using a text-editing program such as Notepad or TextEdit on Windows. You can also use an HTML editor like Adobe Dreamweaver. Follow these steps to open an HTML document.
- Search for HTML documents in File Explorer on a Windows computer (or Finder on a Mac).
- Right-click the HTML document you want to edit.
- Hover over the option " Open with ”.
- Click the program you want to use to edit the file.
Step 2. Press the space key to add a regular space
To add a regular space, click where you need to insert a space and press the spacebar on your keyboard. Normally, HTML will display only one space between words, regardless of how many times you press the spacebar.
Step 3. Type to forcibly add trailing spaces
The resulting code is known as a non-breaking space or fixed space because it prevents line splitting at the location where the code is placed.
- For example, type Hello everyone! to insert an extra space between the words "Hello" and "everyone!"
- If you overuse these characters, your browser will have a hard time inserting line breaks in a neat and easy-to-read way.
- You can also type to force insert a space.
Step 4. Insert spaces of various widths
You can add a longer space using one of the following options:
- Two spaces – Type
- Four spaces – Type
- Indent – Type
Method 2 of 3: Using CSS Code
Step 1. Open the HTML or CSS document
CSS code can be applied to the header of an HTML document or written as an external CSS document.
The head of the HTML document is at the top of the file. This section is between the "" and "" marks
Step 2. Create a style segment for the CSS code
The style segment needs to be added at the head of the HTML code or in a separate style sheet. Use the following flags to create style segments in HTML documents or separate style sheets.
- Type to open the styles segment. All CSS code needs to be added after this mark.
- Type to close the style segment. All CSS code needs to be entered before this closing mark.
Step 3. Type the following into the style segment: p {text-indent: 5em;}. This flag tells the browser to indent five spaces when added to the appropriate HTML code.
- You can adjust the number or width of spaces by typing a different number after the "text-indent:" code.
- The unit " em " is equivalent to one space at the specified or applicable font size. You can use other units such as percentages (eg " text-indent: 15%; ") or length units (eg " text-indent: 3mm; ").
Step 4. Tikka
on the part you want to indent into.
This mark needs to be added to the body of the HTML, before the text you want to indent into. After that, the indent according to the specifications specified in the CSS code will be added to the text.
Method 3 of 3: Using Preformatted Text
Step 1. Open the HTML document
You can edit HTML documents using a text-editing program such as Notepad or TextEdit on Windows. You can also use an HTML editor like Adobe Dreamweaver. Follow these steps to open an HTML document.
- Search for HTML documents in File Explorer on a Windows computer (or Finder on a Mac).
- Right-click the HTML document you want to edit.
- Hover over the option " Open with ”.
- Click the program you want to use to edit the file.
Step 2. Type
before the text you want to preformat.
The code is a preformatted text opening token.
Step 3. Type the desired text after the"
".
With preformatting, all spaces and line breaks created using the " Enter " key will be displayed in the HTML page.
Step 4. Type after the text.
The preformatted text segment will end.
Tips
- If the space you've inserted produces strange symbols in your browser, it's possible that it's caused by extra data in a text-processing program format that shouldn't be displayed on the internet. You can prevent the symbol from appearing by typing the code in a plain text editing program, such as Notepad or TextEdit.
- CSS is a more sophisticated and predictable style sheet language for designing elements on web pages, including text spacing.
- Fixed space (non-breaking space)
- is an example of a character entity, a code that refers to a character that you cannot type through the keyboard.
Warning
-
HTML characters for Tab
- doesn't work as you might expect. Standard HTML documents don't have tabulation stops so those characters won't work.
- Always write your HTML code in a code editor or plain text file, and not in a word processing file format (eg Word).
