In this article, we are going to show you how to insert spaces and line breaks into an HTML file. Even if you hit the space multiple times, only one space will appear in the HTML file, so tags are needed if you want to insert multiple spaces at once.
Steps
Method 1 of 3: HTML
Step 1. Open an HTML document
This can be done in a regular text editor such as Notepad or TextEdit on Windows. You can also use an HTML file editor such as Adobe Dreamweaver. To open an HTML document:
- Navigate to the HTML document in Explorer (Windows) or Finder (macOS).
- Right click on the desired HTML document.
- Hover over Open With.
- Select the program in which you want to edit the document.
Step 2. Press the space bar to add a regular space
Place the cursor where you want to insert a space, and then press the "Space" key. In HTML, only one space will appear between words, even if you hit the space multiple times.
Step 3. Enter to add an extra space
It is called a non-breaking space because it does not allow for a new line.
- For example, if you enter Hello everyone, between the words Hello and everyone! an extra space will be inserted.
- Keep in mind that too many non-breaking spaces will prevent the browser from making line breaks in the right places, making the text difficult to read.
- You can also enter to insert a space.
Step 4. Insert spaces of different lengths
If you want to insert a longer space, use one of the following options:
- Two spaces - enter
- Four spaces - enter
- Indent (Tab Spacing) - Enter
Method 2 of 3: CSS
Step 1. Open an HTML or CSS document
The CSS code can be inserted into the head of an HTML document or saved as an external CSS file.
The HTML document header is at the top of the file, between the "" and "" tags
Step 2. Create a styling section for CSS
The style section is located at the beginning of the HTML code or in a separate style sheet. Use the following tags to create a style section in an HTML document or style sheet.
- Enter to open the style section. All CSS code will go after this tag.
- Enter to close the style section. All CSS must be placed before this end tag.
Step 3. Enter the following tag in the style section: p {indent-text: 5em;} This tells the browser to indent it by 5 spaces (in the correct HTML).
- To set the number of spaces, change the number after "indent-text:".
- The "em" element matches one space with the specified font size. Other units can be used, such as percent ("Indent-text: 15%;") or millimeters ("Indent-text: 3mm;").
Step 4. Enter
where you want to add indentation.
Do this inside the HTML document where you want to indent. The text will be indented according to the CSS specifications.
Method 3 of 3: Preformatted text
Step 1. Open an HTML document
This can be done in a regular text editor such as Notepad or TextEdit on Windows. You can also use an HTML file editor such as Adobe Dreamweaver. To open an HTML document:
- Navigate to the HTML document in Explorer (Windows) or Finder (macOS).
- Right click on the desired HTML document.
- Hover over Open With.
- Select the program in which you want to edit the document.
Step 2. Enter
before the text you want to preformatted.
This is the opening tag for preformatted text.
Step 3. Enter the text as intended, after the tag "
".
When preformatting the text, any spaces and line breaks created by pressing Enter will be displayed on the HTML page.
Step 4. Enter at the end of the text.
This is the closing tag for preformatted text.
Advice
- If the browser displays spaces as incomprehensible characters, this is most likely due to additional data; they are stored in word processing format and are not displayed on the screen. To avoid this, work in a regular text editor such as Notepad or TextEdit.
- CSS is a much more powerful and predictable way of creating the layout of a web page, including word spacing.
- Non-breaking space
Warnings
- HTML character for Tab ↹ (tabs)
- Enter HTML in a code editor or plain text file rather than a powerful text editor.